{"version":3,"file":"static/chunks/pages/products/[id]-413d128083c214bf.js","mappings":"AACA","sources":["webpack://_N_E/?b43d","webpack://_N_E/./src/api/review.ts","webpack://_N_E/./src/components/Product/Handout/index.ts","webpack://_N_E/./src/components/Product/Handout/FixedPurchaseSection.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutPassSectionModal.tsx","webpack://_N_E/./src/components/common/Segment.tsx","webpack://_N_E/./src/components/Reviews/Detail/ReviewRow.tsx","webpack://_N_E/./src/components/Reviews/Detail/useReviewHandler.ts","webpack://_N_E/./src/components/Reviews/Detail/index.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutProductDetailContent.style.tsx","webpack://_N_E/./src/components/Product/Handout/SectionWithDivider.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutProductDetailContent.tsx","webpack://_N_E/./src/components/Banner/AdBanner/HandoutAdBanner.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutProductDetail.style.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutImageSection.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutAllowanceSection.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutPriceSection.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutCoreSection.tsx","webpack://_N_E/./src/components/Product/Handout/RelatedProducts/RelatedListItem.tsx","webpack://_N_E/./src/components/Product/Handout/RelatedProducts/RelatedProductPreviewModal.tsx","webpack://_N_E/./src/components/Product/Handout/RelatedProducts/MobileDisplayAllRelatedProduct.tsx","webpack://_N_E/./src/components/Product/Handout/RelatedProducts/RelatedProduct.tsx","webpack://_N_E/./src/components/Product/Handout/RelatedProducts/index.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutProductDetailInfo.tsx","webpack://_N_E/./src/components/Product/Handout/HandoutProductDetailView.tsx","webpack://_N_E/./src/components/Product/TextBanner.tsx","webpack://_N_E/./src/components/Product/useProductDetailEventTracking.ts","webpack://_N_E/./src/pages/products/[id].tsx","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/products/[id]\",\n      function () {\n        return require(\"private-next-pages/products/[id].tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/products/[id]\"])\n      });\n    }\n  ","import { otherApiClient } from \".\";\nexport const getReviews = async (payload)=>{\n    const { data  } = await otherApiClient.market(\"/reviews/\".concat(payload.type, \"/\").concat(payload.id), {\n        params: payload.pagination\n    });\n    return data;\n};\nexport const putReviewsLike = async (payload)=>{\n    const { data  } = await otherApiClient.market.put(\"/reviews/\".concat(payload.id, \"/like/\").concat(payload.status));\n    return data;\n};\nexport const deleteReview = async (payload)=>{\n    const { data  } = await otherApiClient.market.delete(\"/reviews/\".concat(payload.id));\n    return data;\n};\nexport const postReview = async (params)=>{\n    const { data  } = await otherApiClient.market.post(\"/reviews\", params);\n    return data;\n};\nexport const getAssetsForReviewForm = async (params)=>{\n    const { data  } = await otherApiClient.market(\"/reviews/selections\", {\n        params\n    });\n    return data;\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  font-weight: 600;\\n  line-height: 1.5;\\n  font-size: 16px;\\n  letter-spacing: -0.16px;\\n  margin-bottom: 12px;\\n  display: flex;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport styled from \"styled-components\";\n//handout breakpoint는 다름.\nexport const HANDOUT_BREAK_POINT = {\n    MOBILE: 768,\n    TABLET: 1080,\n    PC: 1200\n};\nexport const Title = styled.h5.withConfig({\n    componentId: \"sc-4439b192-0\"\n})(_templateObject());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  z-index: 1;\\n  position: fixed;\\n  bottom: 0;\\n  left: 0;\\n  right: 0;\\n  background-color: \",\n        \";\\n  padding: 16px 32px;\\n  display: none;\\n\\n  .ant-btn {\\n    width: 100%;\\n    padding: 12px 20px;\\n    flex: 1;\\n    text-align: center;\\n    font-size: 16px;\\n    font-weight: 600;\\n    line-height: 1.5;\\n    letter-spacing: -0.16px;\\n\\n    .count {\\n      margin-right: 4px;\\n    }\\n  }\\n\\n  dl {\\n    margin: 0;\\n    margin-right: 16px;\\n\\n    dd {\\n      color: \",\n        \";\\n      font-size: 12px;\\n      line-height: 1.5;\\n    }\\n\\n    dt {\\n      font-size: 20px;\\n      font-weight: 700;\\n      line-height: 1.5;\\n      letter-spacing: -0.2px;\\n    }\\n  }\\n\\n  @media (max-width: \",\n        \"px) {\\n    display: flex;\\n  }\\n  @media (max-width: \",\n        \"px) {\\n    padding: 16px;\\n    dl {\\n      dd {\\n        font-size: 12px;\\n      }\\n\\n      dt {\\n        font-size: 16px;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport FilledButton from \"@/components/common/Button/FilledButton\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { numberFormatter } from \"@/lib/utils\";\nimport { Stack, Typography } from \"@mui/material\";\nimport React, { useMemo } from \"react\";\nimport useHandoutProductStore from \"src/store/relatedProduct\";\nimport styled from \"styled-components\";\nimport { HANDOUT_BREAK_POINT } from \".\";\nexport const FixedPurchaseSection = (param)=>{\n    let { isFreepass  } = param;\n    const { purchaseProductsInfo , openPassSectionModal  } = useHandoutProductStore((state)=>({\n            purchaseProductsInfo: state.purchaseProductsInfo,\n            openPassSectionModal: state.openPassSectionModal\n        }));\n    const hasRelatedProducts = useMemo(()=>purchaseProductsInfo.selectedRelatedProducts.length > 0, [\n        purchaseProductsInfo.selectedRelatedProducts\n    ]);\n    const onClick = ()=>{\n        mixpanelEvent(\"Product Detail Page Purchase Button Clicked\");\n        openPassSectionModal();\n    };\n    if (isFreepass) {\n        return /*#__PURE__*/ _jsx(FixedSection, {\n            children: /*#__PURE__*/ _jsx(FilledButton, {\n                type: \"text\",\n                variant: \"solid\",\n                onClick: onClick,\n                children: \"자료 보관함에 넣기\"\n            })\n        });\n    }\n    return /*#__PURE__*/ _jsxs(FixedSection, {\n        children: [\n            /*#__PURE__*/ _jsxs(Stack, {\n                sx: {\n                    mr: 2,\n                    justifyContent: \"center\"\n                },\n                children: [\n                    /*#__PURE__*/ _jsx(Typography, {\n                        variant: \"caption\",\n                        color: \"text.secondary\",\n                        children: hasRelatedProducts ? \"합계 금액\" : \"판매가\"\n                    }),\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"subtitle1\",\n                        color: \"text.title\",\n                        children: [\n                            numberFormatter(purchaseProductsInfo.totalPrice),\n                            \"원\"\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(FilledButton, {\n                type: \"text\",\n                variant: \"solid\",\n                onClick: onClick,\n                children: [\n                    hasRelatedProducts && /*#__PURE__*/ _jsxs(\"span\", {\n                        className: \"count\",\n                        children: [\n                            purchaseProductsInfo.totalCount,\n                            \"개 \"\n                        ]\n                    }),\n                    \"구매하기\"\n                ]\n            })\n        ]\n    });\n};\nconst FixedSection = styled.div.withConfig({\n    componentId: \"sc-259726-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_dim_white_90, (props)=>props.theme.new.colors.sol_gray_500, HANDOUT_BREAK_POINT.TABLET, HANDOUT_BREAK_POINT.MOBILE);\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: unset;\\n\\n  > div > div > section {\\n    min-width: 400px;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport React, { useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport PurchaseSection from \"@/components/Package/PurchaseSection\";\nimport { usePurchaseStore } from \"@/components/Package/PurchaseSection/purchaseStore\";\nimport Modal from \"@/components/modal/Modal\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { Drawer } from \"antd\";\nimport useHandoutProductStore from \"../../../store/relatedProduct\";\nexport const HandoutPassSectionModal = (param)=>{\n    let {} = param;\n    const { isLoggedIn , user: { hasUsableFreepass  }  } = useAuthStore();\n    const showCouponModal = usePurchaseStore((state)=>state.showCouponModal);\n    const { isMobile  } = useWindowDimensions();\n    const { currentProduct , isOpenPassSectionModal , closePassSectionModal  } = useHandoutProductStore((state)=>state);\n    useEffect(()=>{\n        if (isMobile) return;\n        if (isOpenPassSectionModal && showCouponModal) {\n            closePassSectionModal();\n        }\n    }, [\n        isMobile,\n        isOpenPassSectionModal,\n        showCouponModal\n    ]);\n    //태블릿은 모달\n    //모바일은 바텀시트\n    if (!isMobile) return /*#__PURE__*/ _jsx(PassSectionModalLayout, {\n        open: isOpenPassSectionModal,\n        onClose: closePassSectionModal,\n        width: null,\n        // PurchaseModals, PassMenuList보다 낮은 z-index를 가져야 함.\n        depth: 1007,\n        children: /*#__PURE__*/ _jsx(PurchaseSection, {\n            sx: {\n                minWidth: \"400px\"\n            },\n            product: currentProduct,\n            hasUsableFreepass: hasUsableFreepass,\n            isLoggedIn: isLoggedIn\n        })\n    });\n    return /*#__PURE__*/ _jsx(Drawer, {\n        headerStyle: {\n            display: \"none\"\n        },\n        bodyStyle: {\n            padding: 0\n        },\n        style: {\n            borderRadius: \"12px 12px 0 0\"\n        },\n        contentWrapperStyle: {\n            borderRadius: \"12px 12px 0 0\"\n        },\n        push: true,\n        zIndex: 1007,\n        onClose: closePassSectionModal,\n        open: isOpenPassSectionModal,\n        height: \"unset\",\n        placement: \"bottom\",\n        children: /*#__PURE__*/ _jsx(PurchaseSection, {\n            product: currentProduct,\n            hasUsableFreepass: hasUsableFreepass,\n            isLoggedIn: isLoggedIn,\n            fullWidth: true\n        })\n    });\n};\nconst PassSectionModalLayout = styled(Modal).withConfig({\n    componentId: \"sc-ba7854ea-0\"\n})(_templateObject());\nexport const thumbWidth = 56;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  &.ant-segmented {\\n    padding: 2px;\\n    border-radius: 4px;\\n    width: 100%;\\n    background-color: \",\n        \";\\n    .ant-segmented-group {\\n      .ant-segmented-item {\\n        border-radius: 4px;\\n        width: 100%;\\n        box-shadow: 3px 3px 12px 0px rgba(28, 31, 46, 0.06);\\n        .ant-segmented-item-label {\\n          font-size: 16px;\\n          font-weight: 600;\\n          color: \",\n        \";\\n          padding: 10px 12px;\\n          line-height: 1.5;\\n        }\\n      }\\n      .ant-segmented-item-selected .ant-segmented-item-label {\\n        color: \",\n        \";\\n      }\\n    }\\n\\n    @media (max-width: 768px) {\\n      &.ant-segmented {\\n        .ant-segmented-group {\\n          .ant-segmented-item-label {\\n            font-size: 14px;\\n            line-height: 22px;\\n          }\\n        }\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { Segmented } from \"antd\";\nimport styled from \"styled-components\";\nexport const Segment = styled(Segmented).withConfig({\n    componentId: \"sc-13bda633-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_700);\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 20px;\\n\\n  border-bottom: 1px solid \",\n        \";\\n  padding: 32px 0 20px 0;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: space-between;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 12px;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 44px;\\n  height: 44px;\\n  position: relative;\\n  border-radius: 50%;\\n  overflow: hidden;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 5px;\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n  gap: 4px;\\n  font-size: 16px;\\n  font-style: normal;\\n  font-weight: 600;\\n  line-height: 24px; /* 150% */\\n  letter-spacing: -0.16px;\\n\\n  color: \",\n        \";\\n\\n  span {\\n    padding: 0 7px;\\n    border-radius: 4px;\\n    font-size: 12px;\\n    color: \",\n        \";\\n    background-color: \",\n        \";\\n  }\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 2px;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 12px;\\n  font-style: normal;\\n  font-weight: 400;\\n  line-height: 18px; /* 150% */\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject8() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 8px;\\n  border-radius: 6px;\\n  border: 1px solid \",\n        \";\\n  background-color: \",\n        \";\\n\\n  padding: 9px 16px;\\n  font-size: 14px;\\n  font-style: normal;\\n  font-weight: 600;\\n  line-height: 22px; /* 157.143% */\\n  letter-spacing: -0.14px;\\n  color: \",\n        \";\\n  cursor: pointer;\\n\\n  span {\\n    color: \",\n        \";\\n  }\\n\\n  :hover {\\n    border: 1px solid \",\n        \";\\n    background-color: \",\n        \";\\n  }\\n  &.review_help_on {\\n    background-color: \",\n        \";\\n  }\\n\"\n    ]);\n    _templateObject8 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject9() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n  word-break: break-word;\\n\\n  font-size: 16px;\\n  font-style: normal;\\n  font-weight: 400;\\n  line-height: 24px; /* 150% */\\n  letter-spacing: -0.16px;\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject9 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject10() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-wrap: wrap;\\n  gap: 12px;\\n\\n  li {\\n    padding: 4px 8px;\\n    background-color: \",\n        \";\\n    border-radius: 4px;\\n    color: \",\n        \";\\n\\n    &.grade_tag {\\n      font-weight: 600;\\n      color: \",\n        \";\\n      background-color: \",\n        \";\\n    }\\n  }\\n\"\n    ]);\n    _templateObject10 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject11() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: flex-end;\\n\"\n    ]);\n    _templateObject11 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject12() {\n    const data = _tagged_template_literal([\n        \"\\n  all: unset;\\n\\n  display: flex;\\n  justify-content: right;\\n  color: \",\n        \";\\n  font-size: 14px;\\n  font-style: normal;\\n  font-weight: 600;\\n  line-height: 22px; /* 157.143% */\\n  letter-spacing: -0.14px;\\n  cursor: pointer;\\n\"\n    ]);\n    _templateObject12 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject13() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: 12px;\\n  background-color: \",\n        \";\\n  border-radius: 6px;\\n\\n  :hover {\\n    background-color: \",\n        \";\\n  }\\n\"\n    ]);\n    _templateObject13 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject14() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 12px;\\n  align-items: center;\\n  @media (max-width: 768px) {\\n  }\\n\"\n    ]);\n    _templateObject14 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject15() {\n    const data = _tagged_template_literal([\n        \"\\n  p:last-child {\\n    color: \",\n        \";\\n  }\\n\"\n    ]);\n    _templateObject15 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject16() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 14px;\\n  font-style: normal;\\n  font-weight: 400;\\n  line-height: 22px; /* 157.143% */\\n  letter-spacing: -0.14px;\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject16 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { formatDateToDot } from \"src/utils/formatting\";\nimport styled from \"styled-components\";\nimport { ProductRating } from \"..\";\nimport { Sizes } from \"../../icon/IconList\";\nconst AuthorProduct = (param)=>{\n    let { authorProduct , reviewItem  } = param;\n    const { id , title , sourceTitle , imageUrl  } = authorProduct;\n    return /*#__PURE__*/ _jsx(Link, {\n        href: \"/products/\".concat(id),\n        onClick: ()=>mixpanelEvent(\"Review Source Handout Clicked\", {\n                //mx-109\n                \"후기 ID\": reviewItem.id,\n                \"Product ID\": id,\n                \"Product Title\": title,\n                \"based source product title\": sourceTitle\n            }),\n        children: /*#__PURE__*/ _jsx(AuthorProductBox, {\n            children: /*#__PURE__*/ _jsxs(ProductItem, {\n                children: [\n                    /*#__PURE__*/ _jsx(Image, {\n                        src: imageUrl,\n                        width: 34,\n                        height: 48,\n                        alt: \"mock product image\"\n                    }),\n                    /*#__PURE__*/ _jsxs(ProductInfo, {\n                        children: [\n                            /*#__PURE__*/ _jsx(ProductInfoTitle, {\n                                children: title\n                            }),\n                            /*#__PURE__*/ _jsx(ProductInfoTitle, {\n                                children: sourceTitle\n                            })\n                        ]\n                    })\n                ]\n            })\n        })\n    });\n};\nconst ReviewRow = (param)=>{\n    let { reviewItem , mutationCount , mutationDelete  } = param;\n    const { id , userInfo , likeInfo , rating , gradeTagItems , contentsTagItems , message , messageStatus , createdAt , productInfo , isMine  } = reviewItem;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsxs(RowBox, {\n            children: [\n                /*#__PURE__*/ _jsxs(Reviewer, {\n                    children: [\n                        /*#__PURE__*/ _jsxs(LeftBox, {\n                            children: [\n                                /*#__PURE__*/ _jsx(Avatar, {\n                                    children: /*#__PURE__*/ _jsx(Image, {\n                                        src: userInfo.profileImage,\n                                        fill: true,\n                                        alt: \"mock profile image\"\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsxs(Info, {\n                                    children: [\n                                        /*#__PURE__*/ _jsxs(InfoName, {\n                                            children: [\n                                                userInfo.nickname,\n                                                \" \",\n                                                /*#__PURE__*/ _jsx(\"span\", {\n                                                    children: userInfo.job\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsxs(Rating, {\n                                            children: [\n                                                /*#__PURE__*/ _jsx(ProductRating, {\n                                                    precision: 0.1,\n                                                    value: rating,\n                                                    readOnly: true,\n                                                    size: Sizes.small\n                                                }),\n                                                /*#__PURE__*/ _jsx(ReviewDate, {\n                                                    children: createdAt ? formatDateToDot(createdAt).slice(2) : \"\"\n                                                })\n                                            ]\n                                        })\n                                    ]\n                                })\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsxs(UserHelpButton, {\n                            onClick: ()=>{\n                                mutationCount({\n                                    id: id,\n                                    status: likeInfo.isOn ? \"off\" : \"on\"\n                                });\n                                mixpanelEvent(\"Review Thanks Button Clicked\", {\n                                    //mx-110 채워야 할 항목은 배포전에 확인해야할듯 합니다.\n                                    \"후기 ID\": id,\n                                    \"Product ID\": (productInfo === null || productInfo === void 0 ? void 0 : productInfo.id) ? productInfo.id : \"\",\n                                    \"Product Title\": productInfo === null || productInfo === void 0 ? void 0 : productInfo.title\n                                });\n                            },\n                            className: likeInfo.isOn ? \"review_help_on\" : \"\",\n                            children: [\n                                \"도움이 됐어요\",\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    children: likeInfo.count\n                                })\n                            ]\n                        })\n                    ]\n                }),\n                productInfo && /*#__PURE__*/ _jsx(AuthorProduct, {\n                    authorProduct: productInfo,\n                    reviewItem: reviewItem\n                }),\n                /*#__PURE__*/ _jsx(Contents, {\n                    children: message\n                }),\n                /*#__PURE__*/ _jsxs(ReviewTag, {\n                    children: [\n                        gradeTagItems.map((tag, index)=>{\n                            return /*#__PURE__*/ _jsx(\"li\", {\n                                className: \"grade_tag\",\n                                children: tag\n                            }, index);\n                        }),\n                        contentsTagItems.map((tag, index)=>{\n                            return /*#__PURE__*/ _jsx(\"li\", {\n                                children: tag\n                            }, index);\n                        })\n                    ]\n                }),\n                isMine && /*#__PURE__*/ _jsx(DeleteWrapper, {\n                    children: /*#__PURE__*/ _jsx(DeleteButton, {\n                        onClick: ()=>{\n                            mutationDelete(id);\n                            ;\n                            mixpanelEvent(\"Review Delete Button Clicked \", {\n                                //mx-112 채워야 할 항목은 배포전에 확인해야할듯 합니다.\n                                \"후기 ID\": id,\n                                \"Product Id\": productInfo === null || productInfo === void 0 ? void 0 : productInfo.id,\n                                \"Product Title\": productInfo === null || productInfo === void 0 ? void 0 : productInfo.title\n                            });\n                        },\n                        children: \"내 후기 삭제하기\"\n                    })\n                })\n            ]\n        })\n    });\n};\nconst RowBox = styled.div.withConfig({\n    componentId: \"sc-36e32f80-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_50);\nconst Reviewer = styled.div.withConfig({\n    componentId: \"sc-36e32f80-1\"\n})(_templateObject1());\nconst LeftBox = styled.div.withConfig({\n    componentId: \"sc-36e32f80-2\"\n})(_templateObject2());\nconst Avatar = styled.span.withConfig({\n    componentId: \"sc-36e32f80-3\"\n})(_templateObject3());\nconst Info = styled.div.withConfig({\n    componentId: \"sc-36e32f80-4\"\n})(_templateObject4());\nconst InfoName = styled.p.withConfig({\n    componentId: \"sc-36e32f80-5\"\n})(_templateObject5(), (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_50);\n// const InfoType = styled.span``\nconst Rating = styled.div.withConfig({\n    componentId: \"sc-36e32f80-6\"\n})(_templateObject6());\nconst ReviewDate = styled.p.withConfig({\n    componentId: \"sc-36e32f80-7\"\n})(_templateObject7(), (props)=>props.theme.new.colors.sol_gray_300);\nconst UserHelpButton = styled.button.withConfig({\n    componentId: \"sc-36e32f80-8\"\n})(_templateObject8(), (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.white, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_blue_500, (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_50);\nconst Contents = styled.p.withConfig({\n    componentId: \"sc-36e32f80-9\"\n})(_templateObject9(), (props)=>props.theme.new.colors.sol_gray_700);\nconst ReviewTag = styled.div.withConfig({\n    componentId: \"sc-36e32f80-10\"\n})(_templateObject10(), (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_700, (props)=>props.theme.new.colors.sol_mint_500, (props)=>props.theme.new.colors.sol_mint_50);\nconst DeleteWrapper = styled.div.withConfig({\n    componentId: \"sc-36e32f80-11\"\n})(_templateObject11());\nconst DeleteButton = styled.button.withConfig({\n    componentId: \"sc-36e32f80-12\"\n})(_templateObject12(), (props)=>props.theme.new.colors.sol_red_400);\nconst AuthorProductBox = styled.div.withConfig({\n    componentId: \"sc-36e32f80-13\"\n})(_templateObject13(), (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_50);\nconst ProductItem = styled.div.withConfig({\n    componentId: \"sc-36e32f80-14\"\n})(_templateObject14());\nconst ProductInfo = styled.div.withConfig({\n    componentId: \"sc-36e32f80-15\"\n})(_templateObject15(), (props)=>props.theme.new.colors.sol_gray_500);\nconst ProductInfoTitle = styled.p.withConfig({\n    componentId: \"sc-36e32f80-16\"\n})(_templateObject16(), (props)=>props.theme.new.colors.sol_gray_700);\nexport default ReviewRow;\n","import useRedirect from \"@/hooks/useRedirect\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { REGISTRATION_PAGE } from \"@/settings/constant\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useState } from \"react\";\nimport { deleteReview, putReviewsLike } from \"src/api/review\";\nconst useReviewHandler = (productItem)=>{\n    const queryClient = useQueryClient();\n    const { loginPath  } = useRedirect();\n    const router = useRouter();\n    const putReviewHelpCountMutation = useMutation(putReviewsLike);\n    const deleteReviewMutation = useMutation(deleteReview);\n    const [reviewStatus, setReviewStatus] = useState(null);\n    const [deleteReviewId, setDeleteReviewId] = useState(null);\n    // 좋아요 낙관적 업데이트 실패한 곳\n    const { mutate: putReviewMutate  } = useMutation({\n        mutationFn: putReviewsLike,\n        onMutate: async (param)=>{\n            ;\n            await queryClient.cancelQueries({\n                queryKey: [\n                    \"getReviews\"\n                ]\n            });\n            const previousData = queryClient.getQueryData([\n                \"getReviews\"\n            ]);\n            ;\n            queryClient.setQueryData([\n                \"getReviews\"\n            ], (old)=>{\n                if (!old) return;\n                ;\n                const newReviews = old.pages.map((page)=>{\n                    return {\n                        ...page,\n                        data: page.data.map((review)=>{\n                            if (review.id === param.id) {\n                                return {\n                                    ...review,\n                                    likeInfo: {\n                                        ...review.likeInfo,\n                                        count: param.status === \"on\" ? review.likeInfo.count + 1 : review.likeInfo.count - 1,\n                                        isOn: param.status === \"on\"\n                                    }\n                                };\n                            }\n                            return review;\n                        })\n                    };\n                });\n                ;\n                return {\n                    pages: newReviews,\n                    pageParams: old.pageParams\n                };\n            });\n            return {\n                previousData\n            };\n        },\n        onError: (error, variables, context)=>{\n            ;\n        },\n        onSettled: (data, error, variables, context)=>{\n            ;\n            queryClient.invalidateQueries([\n                \"getReviews\"\n            ]);\n        }\n    });\n    const handleReviewHelpCountClick = useCallback(async (param)=>{\n        try {\n            await putReviewHelpCountMutation.mutateAsync(param);\n            queryClient.invalidateQueries([\n                \"getReviews\"\n            ]);\n            mixpanelEvent(\"Review Thanks Completed\", {\n                //mx-111 채워야 할 항목은 배포전에 확인해야할듯 합니다.\n                \"후기 ID\": param.id,\n                \"Product ID\": productItem.id,\n                \"Product Title\": productItem.title,\n                \"Product Subject\": productItem.sub_category,\n                Author: productItem.author,\n                \"Based Source Product ID\": productItem.source.product_id,\n                \"Based Source Product Title\": productItem.source.title\n            });\n        } catch (error) {\n            const { status  } = error.response;\n            if (status === 401) {\n                setReviewStatus({\n                    type: \"login\"\n                });\n            }\n        }\n    }, [\n        putReviewHelpCountMutation,\n        queryClient,\n        setReviewStatus\n    ]);\n    const deleteReviewSuccess = useCallback(async (id)=>{\n        try {\n            setReviewStatus(()=>({\n                    type: \"success\"\n                }));\n            await deleteReviewMutation.mutateAsync({\n                id\n            });\n            queryClient.invalidateQueries([]);\n            mixpanelEvent(\"Review Delete Completed\", {\n                //mx-115\n                \"후기 ID\": id,\n                \"Product ID\": productItem.id,\n                \"Product Title\": productItem.title,\n                \"Product Subject\": productItem.sub_category,\n                Author: productItem.author,\n                \"Based Source Product ID\": productItem.source.product_id,\n                \"Based Source Product Title\": productItem.source.title\n            });\n        } catch (error) {\n            const { status  } = error.response;\n            setReviewStatus({\n                type: \"error\",\n                errorCode: status\n            });\n        }\n    }, [\n        deleteReviewMutation,\n        setReviewStatus\n    ]);\n    const handleDeleteReview = useCallback((id)=>{\n        setReviewStatus({\n            type: \"delete\"\n        });\n    }, [\n        setReviewStatus\n    ]);\n    const handleModalClose = useCallback(()=>{\n        setReviewStatus(null);\n    }, [\n        setReviewStatus\n    ]);\n    const setModalProps = useCallback(()=>{\n        switch(reviewStatus.type){\n            case \"login\":\n                return {\n                    isOpen: true,\n                    onClose: ()=>handleModalClose(),\n                    title: \"로그인이 필요해요\",\n                    content: \"로그인 혹은 회원가입을 진행해 주세요.\",\n                    prefix: {\n                        label: \"로그인\",\n                        variant: \"soft\",\n                        handleClick: ()=>{\n                            handleModalClose(), router.push(loginPath);\n                        }\n                    },\n                    suffix: {\n                        label: \"회원가입\",\n                        variant: \"solid\",\n                        handleClick: ()=>{\n                            handleModalClose(), router.push(REGISTRATION_PAGE);\n                        }\n                    }\n                };\n            case \"success\":\n                return {\n                    isOpen: true,\n                    onClose: ()=>handleModalClose(),\n                    title: \"후기가 삭제되었어요.\",\n                    suffix: {\n                        label: \"확인\",\n                        variant: \"solid\",\n                        handleClick: ()=>{\n                            // queryClient.invalidateQueries(['getReviews'])\n                            handleModalClose();\n                        }\n                    }\n                };\n            case \"delete\":\n                return {\n                    isOpen: true,\n                    onClose: ()=>handleModalClose(),\n                    severity: \"caution\",\n                    title: \"후기를 삭제하시겠어요?\",\n                    content: \"삭제된 후기는 복구가 불가능하며, 해당 자료의 후기를 다시 작성하실 수 없습니다.\",\n                    prefix: {\n                        label: \"취소\",\n                        variant: \"soft\",\n                        handleClick: ()=>{\n                            mixpanelEvent(\"Popup Button Clicked\", {\n                                //mx-113\n                                \"Popup Type\": \"Check Deleting Review\",\n                                \"Popup Title\": \"후기를 삭제하시겠어요?\",\n                                \"Button Name\": \"취소\",\n                                \"Button URL\": \"null\"\n                            });\n                            handleModalClose();\n                        }\n                    },\n                    suffix: {\n                        label: \"삭제하기\",\n                        variant: \"solid\",\n                        handleClick: ()=>{\n                            deleteReviewSuccess(deleteReviewId);\n                            // setReviewStatus(null)\n                            mixpanelEvent(\"Popup Button Clicked\", {\n                                //mx-114\n                                \"Popup Type\": \"Check Deleting Review\",\n                                \"Popup Title\": \"후기를 삭제하시겠어요?\",\n                                \"Button Name\": \"삭제하기\",\n                                \"Button URL\": \"null\"\n                            });\n                        }\n                    }\n                };\n            case \"error\":\n                const contents = {\n                    title: reviewStatus.errorCode === 403 ? \"본인 후기가 아닙니다.\" : \"후기 삭제에 실패했어요.\",\n                    content: reviewStatus.errorCode === 403 ? \"본인 후기만 삭제할 수 있어요.\" : \"다시 시도해 주세요.\"\n                };\n                return {\n                    isOpen: true,\n                    onClose: ()=>handleModalClose(),\n                    title: contents.title,\n                    content: contents.content,\n                    suffix: {\n                        label: \"확인\",\n                        variant: \"solid\",\n                        handleClick: ()=>{\n                            handleModalClose();\n                        }\n                    }\n                };\n            default:\n                return {\n                    isOpen: true,\n                    onClose: ()=>handleModalClose(),\n                    title: \"다시 시도해주세요.\",\n                    suffix: {\n                        label: \"확인\",\n                        variant: \"solid\",\n                        handleClick: ()=>{\n                            handleModalClose();\n                        }\n                    }\n                };\n        }\n    }, [\n        reviewStatus,\n        handleModalClose,\n        deleteReviewSuccess\n    ]);\n    return [\n        handleReviewHelpCountClick,\n        handleDeleteReview,\n        deleteReviewSuccess,\n        reviewStatus,\n        setReviewStatus,\n        setModalProps,\n        setDeleteReviewId\n    ];\n};\nexport default useReviewHandler;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 32px;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  width: 100%;\\n  height: 48px;\\n  background-color: \",\n        \";\\n  border-radius: 6px;\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 8px;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  p {\\n    display: flex;\\n    gap: 4px;\\n    font-size: 16px;\\n    font-style: normal;\\n    font-weight: 600;\\n    line-height: 24px; /* 150% */\\n    letter-spacing: -0.16px;\\n    color: \",\n        \";\\n    span {\\n      color: \",\n        \";\\n    }\\n  }\\n\\n  button {\\n    all: unset;\\n    font-size: 16px;\\n    font-weight: 400;\\n    line-height: 24px; /* 150% */\\n    letter-spacing: -0.16px;\\n    color: \",\n        \";\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n  flex-direction: column;\\n\\n  padding: 20px;\\n  border-radius: 6px;\\n  background-color: \",\n        \";\\n\\n  p {\\n  }\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 20px;\\n  font-weight: 600;\\n  line-height: 30px; /* 150% */\\n  letter-spacing: -0.2px;\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: center;\\n\"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject8() {\n    const data = _tagged_template_literal([\n        \"\\n  all: unset;\\n  width: 340px;\\n\\n  text-align: center;\\n  padding: 12px 16px;\\n  border-radius: 6px;\\n  border: 1px solid \",\n        \";\\n  color: \",\n        \";\\n  font-weight: 600;\\n  cursor: pointer;\\n\\n  :hover {\\n    background-color: rgba(169, 175, 199, 0.2);\\n    border: 1px solid \",\n        \";\\n  }\\n\\n  @media (max-width: 768px) {\\n    width: 100%;\\n  }\\n\"\n    ]);\n    _templateObject8 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject9() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 16px;\\n  font-weight: 400;\\n  line-height: 24px;\\n  color: \",\n        \";\\n\\n  padding: 25px 0;\\n\"\n    ]);\n    _templateObject9 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { useInfiniteQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { getReviews } from \"src/api/review\";\nimport useHandoutProductStore from \"src/store/relatedProduct\";\nimport styled from \"styled-components\";\nimport { ProductRating } from \"..\";\nimport { Segment } from \"../../common/Segment\";\nimport { Sizes } from \"../../icon/IconList\";\nimport Dialog from \"./Dialog\";\nimport ReviewRow from \"./ReviewRow\";\nimport useReviewHandler from \"./useReviewHandler\";\nvar ReviewType;\n(function(ReviewType) {\n    ReviewType[\"PRODUCT\"] = \"product\";\n    ReviewType[\"AUTHOR\"] = \"author\";\n})(ReviewType || (ReviewType = {}));\nconst ReviewTabString = {\n    [ReviewType.PRODUCT]: \"이 자료의 후기\",\n    [ReviewType.AUTHOR]: \"저자의 다른 후기\"\n};\nconst segmentOptions = [\n    {\n        label: ReviewTabString[ReviewType.PRODUCT],\n        value: ReviewType.PRODUCT\n    },\n    {\n        label: ReviewTabString[ReviewType.AUTHOR],\n        value: ReviewType.AUTHOR\n    }\n];\nconst LIMIT = 5;\nconst Review = (param)=>{\n    let { productItem  } = param;\n    const { asPath  } = useRouter();\n    const { hasReview , setHasReview , setRating  } = useHandoutProductStore((state)=>({\n            hasReview: state.hasReview,\n            setHasReview: state.setHasReview,\n            setRating: state.setRating\n        }));\n    const [tabStatus, setTabStatus] = useState(ReviewType.PRODUCT);\n    const [reviewTypeCount, setReviewTypeCount] = useState(null);\n    const [handleReviewHelpCountClick, handleDeleteReview, , reviewStatus, , setModalProps, setDeleteReviewId] = useReviewHandler(productItem);\n    const handleReviewType = useCallback((type)=>{\n        setTabStatus(type);\n        mixpanelEvent(\"Tab UI Clicked\", {\n            //mx-108\n            \"Tab Type\": \"Review Type\",\n            \"Tab Name\": type === ReviewType.PRODUCT ? \"이 자료의 후기\" : \"저자의 다른 후기\"\n        });\n    }, [\n        setTabStatus\n    ]);\n    const searchPath = useMemo(()=>{\n        const splitPath = asPath.split(\"/\");\n        return splitPath[splitPath.length - 1];\n    }, [\n        asPath\n    ]);\n    const { data: reviewResponse , fetchNextPage , hasNextPage  } = useInfiniteQuery([\n        \"getReviews\",\n        tabStatus,\n        searchPath\n    ], (param)=>{\n        let { pageParam =0  } = param;\n        return getReviews({\n            id: tabStatus === ReviewType.PRODUCT ? searchPath : String(productItem.author_id),\n            type: tabStatus,\n            pagination: {\n                offset: pageParam,\n                limit: LIMIT\n            }\n        });\n    }, {\n        getNextPageParam: (lastPage)=>{\n            const { offset , total  } = lastPage.pagination;\n            if (offset + LIMIT >= total) return undefined;\n            return offset + LIMIT;\n        },\n        onError: (error)=>{\n            ;\n        }\n    });\n    useEffect(()=>{\n        // 자료 후기가 없는데 저자 후기가 있는경우 탭 변경 및 리뷰 타입 상태 저장\n        if (!reviewResponse) return;\n        const totalCount = reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].pagination.total;\n        if (totalCount === 0 && reviewTypeCount === null) {\n            setReviewTypeCount({\n                type: ReviewType.PRODUCT,\n                count: totalCount\n            });\n            setTabStatus(ReviewType.AUTHOR);\n        }\n    }, [\n        reviewResponse\n    ]);\n    useEffect(()=>{\n        // 자료 후기도 없고 저자 후기도 없는경우 후기 섹션 안보이게\n        if (!reviewTypeCount) return;\n        if (reviewTypeCount.type === \"product\" && reviewTypeCount.count === 0 && tabStatus === ReviewType.AUTHOR && (reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].pagination.total) === 0) {\n            setHasReview(false);\n        }\n    }, [\n        reviewTypeCount,\n        setHasReview,\n        reviewResponse\n    ]);\n    useEffect(()=>{\n        if (reviewResponse && tabStatus === ReviewType.PRODUCT) {\n            setRating(reviewResponse.pages[0].averageRating);\n        }\n    }, [\n        reviewResponse,\n        tabStatus\n    ]);\n    // if (!reviewResponse) return null 맨 처음 렌더링 할 때, 가리기 위해서 추가했지만 탭을 전환하는 그 사이에 후기가 ㅆㅏ악 다 사라지는 이슈로 일단 보류\n    return /*#__PURE__*/ _jsxs(ReviewBox, {\n        children: [\n            reviewStatus && reviewStatus.type && /*#__PURE__*/ _jsx(Dialog, {\n                ...setModalProps()\n            }),\n            /*#__PURE__*/ _jsx(Tab, {\n                children: /*#__PURE__*/ _jsx(Segment, {\n                    onChange: handleReviewType,\n                    value: tabStatus,\n                    options: segmentOptions,\n                    onResize: null,\n                    onResizeCapture: null\n                })\n            }),\n            /*#__PURE__*/ _jsxs(ReviewCountingInfo, {\n                children: [\n                    /*#__PURE__*/ _jsxs(ReviewFiltering, {\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"p\", {\n                                children: [\n                                    \"후기\",\n                                    /*#__PURE__*/ _jsx(\"span\", {\n                                        children: (reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].pagination.total) || 0\n                                    })\n                                ]\n                            }),\n                            (reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].pagination.total) > 0 && /*#__PURE__*/ _jsx(\"button\", {\n                                children: \"작성일순\"\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(RatingArea, {\n                        children: !(reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].pagination.total) ? tabStatus === ReviewType.PRODUCT ? /*#__PURE__*/ _jsx(DisabledReviewText, {\n                            children: \"아직 등록된 자료의 후기가 없어요!\"\n                        }) : /*#__PURE__*/ _jsx(DisabledReviewText, {\n                            children: \"아직 등록된 저자의 다른 후기가 없어요!\"\n                        }) : /*#__PURE__*/ _jsxs(_Fragment, {\n                            children: [\n                                /*#__PURE__*/ _jsx(StarRating, {\n                                    children: /*#__PURE__*/ _jsx(ProductRating, {\n                                        precision: 0.1,\n                                        value: reviewResponse.pages[0].averageRating,\n                                        readOnly: true,\n                                        size: Sizes.large\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsxs(Average, {\n                                    children: [\n                                        tabStatus === ReviewType.AUTHOR ? \"전체 후기 평균 \" : \"평균 \",\n                                        (reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages[0].averageRating) || 0,\n                                        \"점\"\n                                    ]\n                                })\n                            ]\n                        })\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                children: reviewResponse === null || reviewResponse === void 0 ? void 0 : reviewResponse.pages.map((page)=>{\n                    return page.data.map((review)=>{\n                        return /*#__PURE__*/ _jsx(ReviewRow, {\n                            reviewItem: review,\n                            mutationCount: (param)=>handleReviewHelpCountClick(param),\n                            mutationDelete: (id)=>{\n                                handleDeleteReview(id);\n                                setDeleteReviewId(id);\n                            }\n                        }, review.id);\n                    });\n                })\n            }),\n            hasNextPage && /*#__PURE__*/ _jsx(ReviewButtonBox, {\n                children: /*#__PURE__*/ _jsx(MoreReviewButton, {\n                    onClick: ()=>{\n                        fetchNextPage();\n                        mixpanelEvent(\"More Button Clicked\", {\n                            //mx-116, 117\n                            \"Button Type\": tabStatus === ReviewType.PRODUCT ? \"이 자료의 후기\" : \"저자의 다른 후기\",\n                            \"Button Name\": \"{후기 더보기}\"\n                        });\n                    },\n                    children: \"후기 더보기\"\n                })\n            })\n        ]\n    });\n};\nconst ReviewBox = styled.article.withConfig({\n    componentId: \"sc-7cad3f5a-0\"\n})(_templateObject());\nconst Tab = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_50);\nconst ReviewCountingInfo = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-2\"\n})(_templateObject2());\nconst ReviewFiltering = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_blue_500, (props)=>props.theme.new.colors.sol_gray_700);\nconst RatingArea = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-4\"\n})(_templateObject4(), (props)=>props.theme.new.colors.sol_gray_0);\nconst StarRating = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-5\"\n})(_templateObject5());\nconst Average = styled.p.withConfig({\n    componentId: \"sc-7cad3f5a-6\"\n})(_templateObject6(), (props)=>props.theme.new.colors.sol_gray_900);\nconst ReviewButtonBox = styled.div.withConfig({\n    componentId: \"sc-7cad3f5a-7\"\n})(_templateObject7());\nconst MoreReviewButton = styled.button.withConfig({\n    componentId: \"sc-7cad3f5a-8\"\n})(_templateObject8(), (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_100);\nconst DisabledReviewText = styled.p.withConfig({\n    componentId: \"sc-7cad3f5a-9\"\n})(_templateObject9(), (props)=>props.theme.new.colors.sol_gray_500);\nexport default Review;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n\tdisplay: flex;\\n\\n\t@media (max-width: 768px) {\\n\t\tposition: relative;\\n\t\tpadding: 8px 0px;\\n\t}\\n\\n\t.detail-content {\\n\t\tpadding-top: 48px;\\n\t\tdisplay: flex;\\n\t\tflex-direction: column;\\n\t\tdiv:first-child > .ant-divider {\\n\t\t\tdisplay: none;\\n\t\t}\\n\t\t@media (max-width: 768px) {\\n\t\t\tpadding-top: 32px;\\n\t\t}\\n\t}\\n\\n\t.studio-promotion-image {\\n\t\tmargin-top: 44px;\\n\\n\t\t&.m {\\n\t\t\tdisplay: none;\\n\t\t}\\n\\n\t\t@media (max-width: 768px) {\\n\t\t\t&.w {\\n\t\t\t\tdisplay: none;\\n\t\t\t}\\n\\n\t\t\t&.m {\\n\t\t\t\tdisplay: block;\\n\t\t\t}\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n\tdisplay: flex;\\n\tposition: sticky;\\n\ttop: \",\n        \"px;\\n\tbackground-color: \",\n        \";\\n\tborder-bottom: 1px solid \",\n        \";\\n\talign-items: center;\\n\tjustify-content: flex-start;\\n\tcursor: pointer;\\n\tgap: 20px;\\n\tfont-weight: 600;\\n\tcolor: \",\n        \";\\n\ttransition: top 0.2s ease-in-out;\\n\tz-index: 1;\\n\\n\tbody:has(.headroom--unpinned) & {\\n\t\ttop: 0;\\n\t}\\n\\n\tli {\\n\t\theight: 100%;\\n\t\tdisplay: flex;\\n\t\ta {\\n\t\t\tfont-size: 16px;\\n\t\t\tpadding: 16px 0px;\\n\t\t\tline-height: 1.5;\\n\t\t\tcolor: \",\n        \";\\n\\n\t\t\t&.active {\\n\t\t\t\tpadding: 16px 10px 14px;\\n\t\t\t\tborder-bottom: 2px solid \",\n        \";\\n\t\t\t\tcolor: \",\n        \";\\n\t\t\t}\\n\t\t}\\n\t}\\n\\n\t@media (max-width: 1200px) {\\n\t}\\n\t@media (max-width: 768px) {\\n\t\tfont-size: 14px;\\n\t\t//margin: 0 -16px;\\n\t\ttop: \",\n        \"px;\\n\t\tli a {\\n\t\t\tpadding: 12px 5px;\\n\t\t\t&.active {\\n\t\t\t\tpadding: 12px 5px 10px;\\n\t\t\t}\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n\t&:nth-of-type(1) {\\n\t\tpadding-top: 0;\\n\t}\\n\\n\tborder-radius: 6px;\\n\t//padding-top: 72px;\\n\\n\t> h3 {\\n\t\tfont-size: 20px;\\n\t\tmargin-bottom: 16px;\\n\t\tfont-weight: 700;\\n\t}\\n\\n\t.wrapper {\\n\t\tborder-radius: 6px;\\n\t\tbackground-color: \",\n        \";\\n\t\tpadding: 20px;\\n\t\tcolor: \",\n        \";\\n\t\twhite-space: pre-wrap;\\n\t\tspan {\\n\t\t\tline-height: 1.5;\\n\t\t}\\n\\n\t\t> :first-child.title {\\n\t\t\tmargin-bottom: 8px;\\n\t\t}\\n\t\t.title {\\n\t\t\tfont-weight: 700;\\n\t\t}\\n\t}\\n\\n\t@media (max-width: 768px) {\\n\t\t> h3 {\\n\t\t\tfont-size: 16px;\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n\tdiv {\\n\t\tdisplay: flex;\\n\t\tflex-direction: column;\\n\t\tgap: 40px;\\n\t}\\n\\n\timg {\\n\t\tborder-radius: 6px;\\n\t\tborder: 1px solid \",\n        \";\\n\t}\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n\t.description {\\n\t\tmargin-bottom: 16px;\\n\t\tline-height: 1.5;\\n\t}\\n\tul {\\n\t\tdisplay: flex;\\n\t\tflex-wrap: wrap;\\n\t\tjustify-content: space-between;\\n\t\tgap: 16px;\\n\\n\t\tli {\\n\t\t\twidth: calc(50% - 20px);\\n\t\t\tdisplay: flex;\\n\\n\t\t\tspan {\\n\t\t\t\tdisplay: inline-block;\\n\t\t\t\tline-height: 1.5;\\n\t\t\t}\\n\\n\t\t\tspan.title {\\n\t\t\t\twidth: 100px;\\n\t\t\t}\\n\\n\t\t\tspan.content {\\n\t\t\t\twidth: calc(100% - 100px);\\n\t\t\t\tcolor: \",\n        \";\\n\t\t\t}\\n\t\t}\\n\t}\\n\\n\t@media (max-width: 768px) {\\n\t\tul {\\n\t\t\tflex-direction: column;\\n\\n\t\t\tli {\\n\t\t\t\twidth: 100%;\\n\t\t\t}\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n\t.info-cell {\\n\t\tdisplay: flex;\\n\t\tgap: 16px;\\n\\n\t\tmargin-top: 32px;\\n\\n\t\t@media screen and (max-width: 768px) {\\n\t\t\tflex-direction: column;\\n\t\t}\\n\\n\t\t.title {\\n\t\t\tmin-width: 100px;\\n\t\t\tfont-weight: 600;\\n\t\t}\\n\\n\t\t.content {\\n\t\t\tcolor: \",\n        \";\\n\t\t\tflex-grow: 1;\\n\t\t\tline-height: 1.5;\\n\t\t\twhite-space: break-spaces;\\n\t\t\t> p {\\n\t\t\t\tline-height: 1.5;\\n\t\t\t\tcolor: \",\n        \";\\n\t\t\t}\\n\\n\t\t\ttext-align: justify;\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n\t.content {\\n\t\tline-height: 1.5;\\n\t\tcolor: \",\n        \";\\n\t}\\n\\n\t.wrapper:not(:last-of-type) {\\n\t\tmargin-bottom: 24px;\\n\t}\\n\\n\tul > li {\\n\t\tcolor: \",\n        \";\\n\t\tlist-style-type: disc;\\n\t\tmargin-inline-start: 24px;\\n\t}\\n\\n\tol {\\n\t\tpadding: 0;\\n\t\tmargin-bottom: 0;\\n\t}\\n\tol > li {\\n\t\tcolor: \",\n        \";\\n\t\tlist-style-type: decimal;\\n\t\tmargin-inline-start: 24px;\\n\t}\\n\"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject8() {\n    const data = _tagged_template_literal([\n        \"\\n\tposition: sticky;\\n\ttop: 112px;\\n\"\n    ]);\n    _templateObject8 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject9() {\n    const data = _tagged_template_literal([\n        \"\\n\tspan:first-child {\\n\t\tmargin-right: 16px;\\n\t}\\n\\n\t> div {\\n\t\tmargin-top: 20px;\\n\t\tdisplay: flex;\\n\t\tflex-direction: column;\\n\t\tgap: 16px;\\n\t}\\n\\n\tdiv {\\n\t\tcolor: \",\n        \";\\n\t}\\n\\n\t@media (max-width: 768px) {\\n\t\tspan {\\n\t\t\tfont-size: 14px;\\n\t\t}\\n\\n\t\tspan:first-child {\\n\t\t\tmargin-right: 12px;\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject9 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject10() {\n    const data = _tagged_template_literal([\n        \"\\n\tmargin: 24px 0;\\n\t.ant-divider {\\n\t\tcolor: \",\n        \";\\n\t}\\n\t@media (max-width: 768px) {\\n\t\tmargin: 24px 0;\\n\t}\\n\"\n    ]);\n    _templateObject10 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject11() {\n    const data = _tagged_template_literal([\n        \"\\n\t.product-price {\\n\t\tdisplay: flex;\\n\t\tgap: 8px;\\n\t\talign-items: center;\\n\\n\t\tfont-size: 24px;\\n\t\tfont-weight: 700;\\n\t\tline-height: 32px; /* 133.333% */\\n\t}\\n\\n\t.sub-text {\\n\t\tcolor: \",\n        \";\\n\t\t//text-align: center;\\n\t\tfont-size: 14px;\\n\t\tline-height: 22px; /* 157.143% */\\n\t\tletter-spacing: -0.14px;\\n\t\tmargin-top: 4px;\\n\t\tfont-weight: 600;\\n\t}\\n\"\n    ]);\n    _templateObject11 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject12() {\n    const data = _tagged_template_literal([\n        \"\\n\tdisplay: flex;\\n\talign-items: center;\\n\tjustify-content: space-between;\\n\tgap: 8px;\\n\\n\t.discount-row {\\n\t\tdisplay: flex;\\n\t\talign-items: center;\\n\t\tjustify-content: space-between;\\n\t\tgap: 8px;\\n\\n\t\tp {\\n\t\t\tcolor: \",\n        \";\\n\t\t\t&:nth-of-type(2) {\\n\t\t\t\tfont-weight: 600;\\n\t\t\t}\\n\t\t}\\n\t}\\n\tbutton {\\n\t\tall: unset;\\n\t\tdisplay: flex;\\n\t\talign-items: center;\\n\t\tjustify-content: center;\\n\t\tborder-radius: 4px;\\n\t\tpadding: 5px 12px;\\n\t\tfont-size: 14px;\\n\t\tfont-weight: 600;\\n\t\tbackground-color: \",\n        \";\\n\\n\t\t:hover {\\n\t\t\tbackground-color: \",\n        \";\\n\t\t}\\n\t\tspan {\\n\t\t\tcolor: \",\n        \";\\n\t\t}\\n\\n\t\tdiv {\\n\t\t\tdisplay: flex;\\n\t\t\talign-items: center;\\n\t\t\tgap: 4px;\\n\t\t}\\n\t\tcursor: pointer;\\n\t\t&.show-coupon {\\n\t\t\tbackground-color: \",\n        \";\\n\t\t\tborder: 1px solid \",\n        \";\\n\\n\t\t\t:hover {\\n\t\t\t\tbackground-color: \",\n        \";\\n\t\t\t}\\n\t\t\tspan {\\n\t\t\t\tcolor: \",\n        \";\\n\t\t\t}\\n\t\t}\\n\t}\\n\"\n    ]);\n    _templateObject12 = function() {\n        return data;\n    };\n    return data;\n}\nimport { GNBHeight, GNBHeightMobile } from \"@/containers/Header/GNB.style\";\nimport { Divider } from \"antd\";\nimport { Element } from \"react-scroll\";\nimport styled from \"styled-components\";\nconst ScrollSection = styled.div.withConfig({\n    componentId: \"sc-efec701b-0\"\n})(_templateObject());\nconst ProductDetailContentWrapper = styled.div.withConfig({\n    componentId: \"sc-efec701b-1\"\n})(_templateObject1());\nconst StyledAnchor = styled.ul.withConfig({\n    componentId: \"sc-efec701b-2\"\n})(_templateObject2(), GNBHeight, (props)=>props.theme.new.colors.sol_dim_white_90, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_400, (props)=>props.theme.new.colors.sol_gray_400, (props)=>props.theme.new.colors.sol_gray_700, (props)=>props.theme.new.colors.sol_gray_700, GNBHeightMobile);\nconst ContentWrapper = styled(Element).withConfig({\n    componentId: \"sc-efec701b-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_600);\nconst PreviewTab = styled(ContentWrapper).withConfig({\n    componentId: \"sc-efec701b-4\"\n})(_templateObject4(), (props)=>props.theme.new.colors.sol_gray_100);\nconst DetailTab = styled(ContentWrapper).withConfig({\n    componentId: \"sc-efec701b-5\"\n})(_templateObject5(), (props)=>props.theme.new.colors.sol_gray_600);\nconst BookInfoTab = styled(ContentWrapper).withConfig({\n    componentId: \"sc-efec701b-6\"\n})(_templateObject6(), (props)=>props.theme.new.colors.sol_gray_600, (props)=>props.theme.new.colors.sol_gray_600);\nconst RefundTab = styled(ContentWrapper).withConfig({\n    componentId: \"sc-efec701b-7\"\n})(_templateObject7(), (props)=>props.theme.new.colors.sol_gray_600, (props)=>props.theme.new.colors.sol_gray_600, (props)=>props.theme.new.colors.sol_gray_600);\nconst PriceTab = styled.div.withConfig({\n    componentId: \"sc-efec701b-8\"\n})(_templateObject8());\nconst ContentsTab = styled(ContentWrapper).withConfig({\n    componentId: \"sc-efec701b-9\"\n})(_templateObject9(), (props)=>props.theme.new.colors.sol_gray_600);\nconst StyledDivider = styled(Divider).withConfig({\n    componentId: \"sc-efec701b-10\"\n})(_templateObject10(), (props)=>props.theme.new.colors.sol_gray_50);\nconst PriceSection = styled.div.withConfig({\n    componentId: \"sc-efec701b-11\"\n})(_templateObject11(), (props)=>props.theme.new.colors.sol_blue_500);\nconst CouponInfoBox = styled.div.withConfig({\n    componentId: \"sc-efec701b-12\"\n})(_templateObject12(), (props)=>props.theme.new.colors.sol_red_400, (props)=>props.theme.new.colors.sol_red_400, (props)=>props.theme.new.colors.sol_red_500, (props)=>props.theme.new.colors.white, (props)=>props.theme.new.colors.white, (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.sol_dim_gray, (props)=>props.theme.new.colors.sol_gray_500);\nexport { BookInfoTab, ContentWrapper, ContentsTab, CouponInfoBox, DetailTab, PreviewTab, PriceSection, PriceTab, ProductDetailContentWrapper, RefundTab, ScrollSection, StyledAnchor, StyledDivider,  };\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { StyledDivider } from \"./HandoutProductDetailContent.style\";\nconst SectionWithDividerContainer = styled.div.withConfig({\n    componentId: \"sc-c7f2203c-0\"\n})(_templateObject());\nexport const SectionWithDivider = (param)=>{\n    let { children  } = param;\n    return /*#__PURE__*/ _jsxs(SectionWithDividerContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(StyledDivider, {}),\n            children\n        ]\n    });\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Image from \"next/image\";\nimport React, { useMemo, useState } from \"react\";\nimport { useBooks } from \"@/components/Books/Order\";\nimport { ExtraResourceNew } from \"@/components/Product/ExtraResourceNew\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { Link as ScrollLink } from \"react-scroll\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport { Title } from \"@/components/Product/Handout/index\";\nimport Review from \"@/components/Reviews/Detail\";\nimport ProductDetailTerms from \"@/modules/products/components/ProductDetail/ProductDetailTerms\";\nimport detailInfoList from \"@/modules/products/components/ProductDetail/detailInfoList\";\nimport useHandoutProductStore from \"../../../store/relatedProduct\";\nimport { BookInfoTab, ContentsTab, DetailTab, PreviewTab, ProductDetailContentWrapper, ScrollSection, StyledAnchor } from \"./HandoutProductDetailContent.style\";\nimport { SectionWithDivider } from \"./SectionWithDivider\";\nvar LinkTab;\n(function(LinkTab) {\n    LinkTab[\"contents\"] = \"contents\";\n    LinkTab[\"author\"] = \"author\";\n    LinkTab[\"preview\"] = \"preview\";\n    LinkTab[\"detail\"] = \"detail\";\n    LinkTab[\"refund\"] = \"refund\";\n    LinkTab[\"book\"] = \"book\";\n    LinkTab[\"bookShipRefund\"] = \"bookShipRefund\";\n    LinkTab[\"review\"] = \"review\";\n})(LinkTab || (LinkTab = {}));\nexport const HandoutProductDetailContent = (param)=>{\n    let { product  } = param;\n    const isBooks = isBooksProduct(product);\n    const { isBooks: isAladinbook  } = useBooks();\n    const isEbook = isBooks && !isAladinbook;\n    const productType = isBooks ? product.productType : product.source_type;\n    const { hasReview  } = useHandoutProductStore((state)=>({\n            hasReview: state.hasReview\n        }));\n    const { publisherName  } = product;\n    const source = isBooks ? product : product.source;\n    const { sub_items  } = source;\n    const { images  } = source;\n    const previewImages = images === null || images === void 0 ? void 0 : images.previews;\n    const promotionImages = (images === null || images === void 0 ? void 0 : images.promotions) ? Array.isArray(images === null || images === void 0 ? void 0 : images.promotions) && (images === null || images === void 0 ? void 0 : images.promotions.slice().sort((a, b)=>a.order - b.order)) : [];\n    const hasSubItems = useMemo(()=>{\n        return sub_items && sub_items.length > 0;\n    }, [\n        sub_items\n    ]);\n    const { width  } = useWindowDimensions();\n    const isMobile = width < 1200;\n    const [scrollLinkOptions] = useState({\n        activeClass: \"active\",\n        smooth: true,\n        offset: isMobile ? -200 : -150,\n        spy: true\n    });\n    const TabList = [\n        {\n            key: \"review\",\n            title: \"후기\",\n            render: hasReview\n        },\n        {\n            key: \"preview\",\n            title: \"샘플 보기\",\n            render: !isBooks && previewImages\n        },\n        {\n            key: \"refund\",\n            title: \"환불/교환\",\n            render: !isBooks || isEbook\n        }\n    ];\n    return /*#__PURE__*/ _jsx(ProductDetailContentWrapper, {\n        children: /*#__PURE__*/ _jsxs(ScrollSection, {\n            children: [\n                /*#__PURE__*/ _jsx(StyledAnchor, {\n                    children: TabList.map((tab, index)=>{\n                        return tab.render ? /*#__PURE__*/ _jsx(\"li\", {\n                            children: /*#__PURE__*/ _jsx(ScrollLink, {\n                                to: tab.key,\n                                ...scrollLinkOptions,\n                                onClick: ()=>mixpanelEvent(\"Product Detail Page Tab Clicked\", {\n                                        \"Tab Name\": tab.title\n                                    }),\n                                children: tab.title\n                            })\n                        }, \"bottom-tab-\".concat(index)) : null;\n                    })\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"detail-content\",\n                    children: [\n                        isEbook && /*#__PURE__*/ _jsx(\"div\", {\n                            children: /*#__PURE__*/ _jsx(\"img\", {\n                                src: \"/static/assets/\".concat(isMobile ? \"Mobile\" : \"PC\", \"-image-goodnote.jpg\"),\n                                alt: \"ebook-promotion-img\"\n                            })\n                        }),\n                        hasSubItems && /*#__PURE__*/ _jsxs(ContentsTab, {\n                            name: \"contents\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"h3\", {\n                                    children: \"포함된 컨텐츠\"\n                                }),\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    children: sub_items.map((subItem, index)=>{\n                                        return /*#__PURE__*/ _jsxs(\"div\", {\n                                            children: [\n                                                /*#__PURE__*/ _jsx(ExtraResourceNew, {\n                                                    type: subItem.type\n                                                }),\n                                                /*#__PURE__*/ _jsx(\"span\", {\n                                                    children: subItem.title\n                                                })\n                                            ]\n                                        }, \"sub-item-\".concat(index));\n                                    })\n                                })\n                            ]\n                        }),\n                        isBooks && (product.introduction || product.tableOfContents) && /*#__PURE__*/ _jsxs(BookInfoTab, {\n                            name: \"book\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"h3\", {\n                                    children: \"도서 정보\"\n                                }),\n                                product.introduction && /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"info-cell\",\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"p\", {\n                                            className: \"title\",\n                                            children: \"책소개\"\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"p\", {\n                                            className: \"content\",\n                                            dangerouslySetInnerHTML: {\n                                                __html: product.introduction\n                                            }\n                                        })\n                                    ]\n                                }),\n                                product.tableOfContents && /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"info-cell\",\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"p\", {\n                                            className: \"title\",\n                                            children: \"목차\"\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"p\", {\n                                            className: \"content\",\n                                            dangerouslySetInnerHTML: {\n                                                __html: product.tableOfContents\n                                            }\n                                        })\n                                    ]\n                                })\n                            ]\n                        }),\n                        hasReview && /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsx(DetailTab, {\n                                name: \"review\",\n                                children: /*#__PURE__*/ _jsx(Review, {\n                                    productItem: product\n                                })\n                            })\n                        }),\n                        (product === null || product === void 0 ? void 0 : product.description) && /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsxs(DetailTab, {\n                                name: \"description\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(Title, {\n                                        children: \"상품 설명\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        className: \"wrapper description\",\n                                        children: product.description\n                                    })\n                                ]\n                            })\n                        }),\n                        promotionImages && promotionImages.length > 0 && /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsxs(PreviewTab, {\n                                name: \"preview\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(Title, {\n                                        children: \"상품 특징\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        children: promotionImages.map((image, index)=>{\n                                            return /*#__PURE__*/ _jsx(Image, {\n                                                alt: \"\".concat(product.title, \"_promotion\"),\n                                                width: 3000,\n                                                height: 6000,\n                                                src: image.url\n                                            }, \"promotion-image-\" + index);\n                                        })\n                                    })\n                                ]\n                            })\n                        }),\n                        previewImages && /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsxs(PreviewTab, {\n                                name: \"preview\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(Title, {\n                                        children: \"샘플 보기\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        children: previewImages.sort((a, b)=>a.page_num - b.page_num).map((image, index)=>{\n                                            return /*#__PURE__*/ _jsx(Image, {\n                                                alt: \"\".concat(product.title, \"_preview_\").concat(image.page_num),\n                                                width: 3000,\n                                                height: 6000,\n                                                src: image.url\n                                            }, \"preview-image-\" + index);\n                                        })\n                                    })\n                                ]\n                            })\n                        }),\n                        /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsxs(DetailTab, {\n                                name: \"detail\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(Title, {\n                                        children: \"상세 정보\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        className: \"wrapper info-wrapper\",\n                                        children: /*#__PURE__*/ _jsx(\"div\", {\n                                            children: /*#__PURE__*/ _jsx(\"ul\", {\n                                                children: detailInfoList(product, isBooks ? product.publisher : publisherName).map((item, index)=>{\n                                                    if (item.value === null || item.value === undefined || item.value === \"0\" || item.value === \"\") return null;\n                                                    return /*#__PURE__*/ _jsxs(\"li\", {\n                                                        children: [\n                                                            /*#__PURE__*/ _jsx(\"span\", {\n                                                                className: \"title\",\n                                                                children: item.type\n                                                            }),\n                                                            /*#__PURE__*/ _jsx(\"span\", {\n                                                                className: \"content\",\n                                                                children: item.value\n                                                            })\n                                                        ]\n                                                    }, \"detail-info-\".concat(index));\n                                                })\n                                            })\n                                        })\n                                    })\n                                ]\n                            })\n                        }),\n                        /*#__PURE__*/ _jsx(SectionWithDivider, {\n                            children: /*#__PURE__*/ _jsx(ProductDetailTerms, {\n                                productType: productType\n                            })\n                        })\n                    ]\n                })\n            ]\n        })\n    });\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  margin-bottom: 48px;\\n  @media (max-width: 768px) {\\n    margin-bottom: 24px;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Title } from \"@/components/Product/Handout\";\nimport { SectionWithDivider } from \"@/components/Product/Handout/SectionWithDivider\";\nimport styled from \"styled-components\";\nimport { AdBannerList, useAdBannerQuery } from \".\";\nexport const HandoutAdBanner = (param)=>{\n    let { shape =\"default\" , position =\"productDetail\" , subject  } = param;\n    const { adBannerResponse , noAdItems  } = useAdBannerQuery({\n        position,\n        subject\n    });\n    if (noAdItems) return null;\n    return /*#__PURE__*/ _jsx(SectionWithDivider, {\n        children: /*#__PURE__*/ _jsxs(Stack, {\n            children: [\n                /*#__PURE__*/ _jsx(Title, {\n                    children: \"쏠북 소식\"\n                }),\n                /*#__PURE__*/ _jsx(AdBannerList, {\n                    position: position,\n                    children: adBannerResponse.items.map((param)=>/*#__PURE__*/ {\n                        let { link , imageUrl , id  } = param;\n                        return _jsx(AdBannerList.Item, {\n                            link: link,\n                            imageUrl: imageUrl,\n                            shape: shape,\n                            id: id,\n                            mixpanelPosition: \"product detail page\"\n                        }, \"adbanner-\" + id);\n                    })\n                })\n            ]\n        })\n    });\n};\nconst Stack = styled.div.withConfig({\n    componentId: \"sc-fd82c6ad-0\"\n})(_templateObject());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: center;\\n  flex-direction: column;\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n  }\\n\\n  i {\\n    vertical-align: middle;\\n  }\\n\\n  .ant-row {\\n    width: 100%;\\n    @media (max-width: 1200px) {\\n      margin: 0 !important;\\n      .ant-col {\\n        max-width: 100%;\\n      }\\n    }\\n    @media (max-width: 768px) {\\n      display: block;\\n      width: 100%;\\n    }\\n  }\\n\\n  .productDetail {\\n    margin: 0;\\n  }\\n\\n  .amount {\\n    display: inline-block;\\n    vertical-align: bottom;\\n    font-size: 16px;\\n    font-weight: bold;\\n    color: rgba(27, 27, 41, 0.7);\\n    padding: 4px 12px;\\n    margin-left: 8px;\\n    border-radius: 15px;\\n    border: solid 1px rgba(27, 27, 41, 0.7);\\n  }\\n\\n  .ant-col {\\n    .preview-btn {\\n      margin-top: 20px;\\n      display: block;\\n      height: 48px;\\n      width: 100%;\\n      border-radius: 6px;\\n      font-size: 16px;\\n      font-weight: 700;\\n      border-color: #6950e5;\\n      @media (max-width: 768px) {\\n        display: none;\\n      }\\n\\n      span {\\n        color: #6950e5;\\n      }\\n\\n      :hover {\\n        opacity: 0.7;\\n      }\\n    }\\n\\n    .share-btn {\\n      display: block;\\n      width: 100%;\\n      height: 72px;\\n      font-size: 24px;\\n      font-weight: 600;\\n      color: #5f5f69;\\n      margin: 24px auto 0;\\n      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.03) !important;\\n\\n      span {\\n        transition: color 0.2s;\\n      }\\n\\n      &:hover {\\n        border-color: #01bfc8;\\n\\n        span {\\n          color: #01bfc8;\\n        }\\n      }\\n\\n      img {\\n        margin-right: 8px;\\n        margin-top: -4px;\\n      }\\n\\n      @media (max-width: 1200px) {\\n        width: calc(100% - 36px);\\n        height: 48px;\\n        line-height: 0;\\n        padding: 0;\\n        margin-top: 16px;\\n        margin-left: 0;\\n\\n        img {\\n          width: 20px;\\n          height: 20px;\\n          margin-right: 8px;\\n        }\\n\\n        span {\\n          font-size: 18px;\\n        }\\n      }\\n      @media (max-width: 768px) {\\n        width: 48px;\\n        padding: 0;\\n        margin-left: auto;\\n        margin-right: 0;\\n        margin-top: 8px;\\n        border-radius: 2px;\\n\\n        img {\\n          width: 18px;\\n          height: 18px;\\n          margin-top: -2px;\\n          margin-right: 0;\\n        }\\n\\n        span {\\n          display: none;\\n        }\\n      }\\n    }\\n  }\\n\\n  .titleWrapper {\\n    display: flex;\\n    flex-direction: row;\\n  }\\n\\n  .ant-radio-group-outline {\\n    display: flex;\\n    flex-direction: column;\\n  }\\n\\n  .ant-radio-wrapper {\\n    border: 1px solid \",\n        \";\\n    margin-bottom: 5px;\\n    padding: 15px;\\n  }\\n\\n  .alert {\\n    width: 100%;\\n    text-align: right;\\n\\n    span {\\n      color: #00bfc8;\\n    }\\n  }\\n\\n  .workbook {\\n    border-top: 1px solid rgba(27, 27, 41, 0.1);\\n    border-bottom: 1px solid rgba(27, 27, 41, 0.1);\\n    padding: 10px 0;\\n\\n    p {\\n      font-weight: bold;\\n    }\\n  }\\n\\n  .price {\\n    font-weight: bold;\\n    font-size: 24px;\\n    display: flex;\\n    justify-content: space-between;\\n\\n    @media (max-width: 1200px) {\\n      font-size: 24px;\\n    }\\n    @media (max-width: 768px) {\\n      font-size: 20px;\\n    }\\n  }\\n\\n  .btnWrapper {\\n    border-style: unset;\\n    display: flex;\\n    justify-content: space-between;\\n    margin: 20px;\\n\\n    button {\\n      width: 45%;\\n      padding: 5px;\\n    }\\n  }\\n\\n  .parsing-badge-wrapper {\\n    margin-top: 16px;\\n    width: 100%;\\n    padding: 14px;\\n    display: flex;\\n    align-items: center;\\n    background-color: #fff6e5;\\n    justify-content: space-between;\\n\\n    .left-badge {\\n      display: flex;\\n      align-items: center;\\n      line-height: 1.43;\\n      font-size: 14px;\\n      color: \",\n        \";\\n    }\\n\\n    span {\\n      margin-left: 8px;\\n      float: left;\\n    }\\n  }\\n\\n  .notParsing-badge-wrapper {\\n    margin-top: 16px;\\n    width: 100%;\\n    padding: 14px;\\n    display: flex;\\n    align-items: center;\\n    background-color: rgba(27, 27, 41, 0.03);\\n    justify-content: space-between;\\n\\n    .label-edit-img {\\n      -webkit-filter: grayscale(100%);\\n      filter: grayscale(100%);\\n      filter: gray;\\n    }\\n\\n    .edit-desc {\\n      color: #5f5f69;\\n      font-size: 14px;\\n      font-weight: 800;\\n      margin-left: 4px;\\n      text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;\\n    }\\n\\n    .left-badge {\\n      display: flex;\\n      align-items: center;\\n      line-height: 1.43;\\n      font-size: 14px;\\n      color: \",\n        \";\\n    }\\n\\n    .edit-request {\\n      font-size: 14px;\\n      color: #1890ff;\\n      font-weight: 800;\\n    }\\n\\n    span {\\n      margin-left: 4px;\\n      float: left;\\n    }\\n\\n    .right-edit {\\n      line-height: 1.43;\\n\\n      img {\\n        margin-left: 4px;\\n        vertical-align: sub;\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  padding-right: 40px;\\n  @media (max-width: 1200px) {\\n    padding-right: 32px;\\n  }\\n  @media (max-width: 768px) {\\n    background-color: \",\n        \";\\n    padding: 40px 0;\\n    max-width: unset !important;\\n    width: calc(100% + 32px);\\n    margin: 0 -16px;\\n  }\\n\\n  .img_box {\\n    width: 244px;\\n    border: solid 1px #e8e8ea;\\n    text-align: center;\\n    border-radius: 6px;\\n    height: auto;\\n    box-shadow: 6px 6px 20px 0px rgba(28, 31, 46, 0.12);\\n\\n    img {\\n      border-radius: 6px;\\n      position: relative;\\n      display: inline-block;\\n      object-fit: contain;\\n      margin: 0 auto;\\n      width: 100%;\\n      height: auto;\\n      max-height: 698px;\\n    }\\n\\n    .no-image {\\n      border-radius: 6px;\\n      position: relative;\\n      display: flex;\\n      flex-direction: column;\\n      justify-content: center;\\n      object-fit: contain;\\n      margin: 0 auto;\\n      width: 100%;\\n      height: 330px;\\n      max-height: 698px;\\n    }\\n\\n    @media (max-width: 768px) {\\n      width: 110px;\\n      margin: 0 auto;\\n    }\\n  }\\n\\n  .preview-btn {\\n    margin-top: 20px;\\n    display: block;\\n    height: 48px;\\n    width: 100%;\\n    border-radius: 6px;\\n    font-size: 16px;\\n    font-weight: 700;\\n    border-color: #6950e5;\\n    @media (max-width: 768px) {\\n      display: none;\\n    }\\n\\n    span {\\n      color: #6950e5;\\n    }\\n\\n    :hover {\\n      opacity: 0.7;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n  flex: 1;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  position: relative;\\n  padding-bottom: 20px;\\n  width: 100%;\\n  display: flex;\\n  flex: 1;\\n  flex-direction: column;\\n  @media (max-width: 768px) {\\n    padding: 24px 0;\\n  }\\n\\n  > h1 {\\n    display: flex;\\n    align-items: center;\\n    font-size: 28px;\\n    font-weight: 700;\\n    color: \",\n        \";\\n    line-height: 1.5;\\n    word-break: break-word;\\n    margin-top: 4px;\\n    margin-bottom: 0;\\n\\n    @media (max-width: 1200px) {\\n      font-size: 28px;\\n    }\\n    @media (max-width: 768px) {\\n      font-size: 18px;\\n    }\\n  }\\n  .rating-box {\\n    display: flex;\\n    align-items: center;\\n    gap: 6px;\\n    margin: 6px 0 12px 0;\\n\\n    p {\\n      font-size: 14px;\\n      font-style: normal;\\n      font-weight: 400;\\n      line-height: 22px; /* 157.143% */\\n      letter-spacing: -0.14px;\\n      color: \",\n        \";\\n    }\\n  }\\n\\n  .authorContainer {\\n    display: flex;\\n    font-size: 16px;\\n    color: \",\n        \";\\n    line-height: 24px;\\n    margin-bottom: 32px;\\n\\n    > a {\\n      border-radius: 4px;\\n      border: 1px solid \",\n        \";\\n      padding: 2px 4px 2px 8px;\\n      font-size: 12px;\\n      color: #4f556b;\\n      line-height: 18px;\\n      margin-left: 8px;\\n      display: flex;\\n      align-items: center;\\n    }\\n  }\\n\\n  .license-guide-btn {\\n    position: absolute;\\n    top: -8px;\\n    right: -16px;\\n    transition: opacity 0.2s;\\n\\n    &,\\n    &:hover {\\n      font-size: 16px;\\n      font-weight: bold;\\n      color: #5f5f69;\\n      border: none;\\n    }\\n\\n    span {\\n      text-decoration: underline;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 16px;\\n  display: flex;\\n  flex-direction: column;\\n  gap: 8px;\\n\\n  li {\\n    display: flex;\\n\\n    div {\\n      line-height: 1.5;\\n\\n      &.type {\\n        color: \",\n        \";\\n        width: 100px;\\n      }\\n\\n      &.type-value {\\n        color: \",\n        \";\\n        width: calc(100% - 100px);\\n\\n        i {\\n          margin-left: 4px;\\n        }\\n      }\\n    }\\n\\n    &.core-info-handout {\\n      .출처교재 {\\n        display: flex;\\n        align-items: center;\\n\\n        > span {\\n          cursor: pointer;\\n          transition: all 0.3s ease;\\n\\n          :hover {\\n            text-decoration: underline;\\n            //text-underline-offset: 1px;\\n          }\\n        }\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  //padding: 28px 0;\\n  .activity {\\n    .desc-title {\\n      display: flex;\\n      align-items: center;\\n      font-size: 16px;\\n      font-weight: 600;\\n      margin-bottom: 12px;\\n      color: \",\n        \";\\n\\n      span {\\n        font-weight: normal;\\n        margin-left: 8px;\\n        color: \",\n        \";\\n        font-size: 12px;\\n      }\\n    }\\n\\n    .allowance-wrapper {\\n      display: flex;\\n      gap: 8px;\\n      flex-wrap: wrap;\\n      @media (max-width: 768px) {\\n        //flex-wrap: nowrap;\\n        //overflow-x: auto;\\n      }\\n    }\\n  }\\n\\n  .key-info {\\n    padding-bottom: 12px;\\n    border-top: solid 1px \",\n        \";\\n\\n    .desc-title {\\n      font-size: 16px;\\n      font-weight: bold;\\n      color: \",\n        \";\\n      padding: 16px 8px;\\n      margin-bottom: 12px;\\n      border: 0;\\n      background-image: linear-gradient(to right, #e8e8ea 33%, rgba(255, 255, 255, 0) 0%);\\n      background-position: bottom;\\n      background-size: 5px 2px;\\n      background-repeat: repeat-x;\\n\\n      &:after {\\n        display: inline-block;\\n        vertical-align: text-top;\\n        content: '';\\n        width: 24px;\\n        height: 24px;\\n        margin-top: -3px;\\n        background: url('/static/assets/img-pin.svg') no-repeat 50% 50%;\\n        background-size: contain;\\n      }\\n    }\\n\\n    p:not(.desc-title) {\\n      font-size: 16px;\\n      font-weight: normal;\\n      color: \",\n        \";\\n      padding: 4px 8px;\\n\\n      span {\\n        display: inline-block;\\n        width: 50px;\\n        font-weight: bold;\\n        color: #5f5f69;\\n      }\\n    }\\n  }\\n\\n  .base-license {\\n    padding: 16px 8px 0;\\n    border: 0;\\n    background-image: linear-gradient(to right, #e8e8ea 33%, rgba(255, 255, 255, 0) 0%);\\n    background-position: top;\\n    background-size: 5px 2px;\\n    background-repeat: repeat-x;\\n\\n    a {\\n      display: inline-block;\\n      border: solid 1px #e8e8ea;\\n      transition: opacity 0.2s;\\n\\n      @media (hover: hover) {\\n        &:hover {\\n          opacity: 0.7;\\n        }\\n      }\\n    }\\n\\n    p {\\n      font-size: 16px;\\n      font-weight: bold;\\n      color: #5f5f69;\\n      margin-bottom: 8px;\\n    }\\n\\n    button {\\n      display: inline-block;\\n      height: auto;\\n      border: solid 1px #e8e8ea;\\n      padding: 0;\\n      margin-right: 4px;\\n    }\\n  }\\n\\n  button.desc-title {\\n    display: block;\\n    width: 100%;\\n    height: 56px;\\n    font-size: 16px;\\n    font-weight: bold;\\n    color: \",\n        \";\\n    text-align: left;\\n    padding: 15px 0;\\n    border: solid 1px \",\n        \";\\n    border-left: 0;\\n    border-right: 0;\\n    background: url('/static/assets/ico-plus-black.svg') no-repeat 100% 50%;\\n    background-size: 16px;\\n    transition: opacity 0.2s;\\n\\n    @media (hover: hover) {\\n      &:hover {\\n        opacity: 0.7;\\n        color: \",\n        \";\\n        border-color: \",\n        \";\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  margin-top: 12px;\\n  padding: 11px 16px;\\n  background-color: \",\n        \";\\n  gap: 8px;\\n  border-radius: 4px;\\n  align-items: center;\\n\\n  p {\\n    margin: 0;\\n  }\\n\\n  > div {\\n    p:first-child {\\n      margin-bottom: 4px;\\n      font-size: 10px;\\n      color: \",\n        \";\\n    }\\n\\n    p:last-child {\\n      font-size: 7px;\\n      color: \",\n        \";\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    align-items: center;\\n    justify-content: center;\\n    padding: 0;\\n    margin-top: 17px;\\n    > div p:first-child {\\n      color: \",\n        \";\\n      margin: 0;\\n    }\\n\\n    .hide_m {\\n      display: none;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { Col as AntdCol } from \"antd\";\nimport styled from \"styled-components\";\nexport const ProductDetailInfoWrapper = styled.div.withConfig({\n    componentId: \"sc-8d9d6231-0\"\n})(_templateObject(), themeGet(\"border.0\"), themeGet(\"text.2\", \"#2C2C2C\"), themeGet(\"text.2\", \"#2C2C2C\"));\nexport const ImageSection = styled.div.withConfig({\n    componentId: \"sc-8d9d6231-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_0);\nexport const Col = styled(AntdCol).withConfig({\n    componentId: \"sc-8d9d6231-2\"\n})(_templateObject2());\nexport const CoreSection = styled.div.withConfig({\n    componentId: \"sc-8d9d6231-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_100);\nexport const ContentInfo = styled.ul.withConfig({\n    componentId: \"sc-8d9d6231-4\"\n})(_templateObject4(), (props)=>props.theme.new.colors.sol_gray_400, (props)=>props.theme.new.colors.sol_gray_600);\nexport const AllowanceInfo = styled.div.withConfig({\n    componentId: \"sc-8d9d6231-5\"\n})(_templateObject5(), (props)=>props.theme.new.colors.sol_gray_900, (props)=>props.theme.new.colors.sol_gray_400, themeGet(\"border.1\", \"#E8E8EA\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"border.1\", \"#E8E8EA\"), themeGet(\"text.0\", \"#1B1B29\"), themeGet(\"border.1\", \"#E8E8EA\"));\nexport const UCIPromotionBox = styled.div.withConfig({\n    componentId: \"sc-8d9d6231-6\"\n})(_templateObject6(), (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_600, (props)=>props.theme.new.colors.sol_gray_400, (props)=>props.theme.new.colors.sol_gray_400);\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Image from \"@/components/common/Image\";\nimport Icon from \"@/components/icon/Icon\";\nimport { Sizes, UCILogo } from \"@/components/icon/IconList\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport BooksBadge from \"@/modules/products/components/ProductDetail/BooksBadge\";\nimport { DEFAULT_BOOK_COVER } from \"@/settings/constant\";\nimport { Button } from \"antd\";\nimport { ImageSection, UCIPromotionBox } from \"./HandoutProductDetail.style\";\nexport const HandoutImageSection = (param)=>{\n    let { thumbImg , title , openPreviewModal , isBooks , hasPreviewImg , uciData  } = param;\n    const { isMobile  } = useWindowDimensions();\n    return /*#__PURE__*/ _jsxs(ImageSection, {\n        className: \"new-col\",\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"img_box\",\n                children: /*#__PURE__*/ _jsx(Image, {\n                    className: \"thumb-img\",\n                    src: thumbImg !== null && thumbImg !== void 0 ? thumbImg : DEFAULT_BOOK_COVER,\n                    alt: \"product-thumbImg-\".concat(title),\n                    width: 244,\n                    height: 347\n                })\n            }),\n            !isBooks && hasPreviewImg && /*#__PURE__*/ _jsx(Button, {\n                className: \"preview-btn\",\n                onClick: ()=>{\n                    openPreviewModal();\n                    mixpanelEvent(\"Product Detail Page_Preview\");\n                },\n                children: \"샘플 보기\"\n            }),\n            isBooks && /*#__PURE__*/ _jsx(BooksBadge, {}),\n            uciData && /*#__PURE__*/ _jsxs(UCIPromotionBox, {\n                children: [\n                    /*#__PURE__*/ _jsx(Icon, {\n                        icon: UCILogo,\n                        size: isMobile ? Sizes.small : Sizes.large\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        children: [\n                            /*#__PURE__*/ _jsx(\"p\", {\n                                children: uciData\n                            }),\n                            /*#__PURE__*/ _jsx(\"p\", {\n                                className: \"hide_m\",\n                                children: \"해당 자료는 국가콘텐츠식별체계를 통해 유통 및 관리됩니다.\"\n                            })\n                        ]\n                    })\n                ]\n            })\n        ]\n    });\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { AllowanceChipList } from \"../AllowanceChipList\";\nimport { AllowanceInfo } from \"./HandoutProductDetail.style\";\nexport const HandoutAllowanceSection = (param)=>{\n    let { isBooks , productType , studioVersion , isParsedByMl  } = param;\n    return /*#__PURE__*/ _jsx(HandoutAllowanceSectionWrapper, {\n        children: /*#__PURE__*/ _jsx(AllowanceInfo, {\n            children: /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"activity\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"p\", {\n                        className: \"desc-title\",\n                        children: [\n                            isBooks ? \"도서\" : productType === \"handout\" ? \"수업자료\" : \"라이선스\",\n                            \" 이용 범위\"\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"allowance-wrapper\",\n                        children: /*#__PURE__*/ _jsx(AllowanceChipList, {\n                            productType: productType,\n                            studioVersion: studioVersion,\n                            isParsedByMl: isParsedByMl\n                        })\n                    })\n                ]\n            })\n        })\n    });\n};\nconst HandoutAllowanceSectionWrapper = styled.div.withConfig({\n    componentId: \"sc-4562de54-0\"\n})(_templateObject());\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { CouponInfoBox } from \"./HandoutProductDetailContent.style\";\nimport Icon from \"@/components/icon/Icon\";\nimport { CouponDownload, Sizes } from \"@/components/icon/IconList\";\nimport { numberFormatter } from \"@/lib/utils\";\nimport { Typography } from \"@mui/material\";\nimport { PriceSection } from \"./HandoutProductDetailContent.style\";\nconst HandoutPriceSection = (param)=>{\n    let { price , hasSelectedPass , selectedTab , handoutCoupons , onCouponClick , filteredHasCoupon , isFreepass  } = param;\n    if (isFreepass && typeof price === \"string\") {\n        return /*#__PURE__*/ _jsx(PriceSection, {\n            children: /*#__PURE__*/ _jsx(Typography, {\n                variant: \"h5\",\n                sx: {\n                    color: \"grey.900\"\n                },\n                children: price\n            })\n        });\n    }\n    return /*#__PURE__*/ _jsxs(PriceSection, {\n        children: [\n            /*#__PURE__*/ _jsxs(\"p\", {\n                className: \"product-price\",\n                children: [\n                    numberFormatter(price),\n                    \"원\",\n                    hasSelectedPass && selectedTab === \"pass\" && /*#__PURE__*/ _jsx(\"span\", {\n                        className: \"sub-text\",\n                        children: \"내 이용권 사용가능!\"\n                    })\n                ]\n            }),\n            selectedTab === \"cart\" && handoutCoupons && /*#__PURE__*/ _jsxs(CouponInfoBox, {\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"discount-row\",\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"p\", {\n                                className: \"product-price\",\n                                children: [\n                                    numberFormatter(handoutCoupons.discountedPrice),\n                                    \"원\"\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsx(\"p\", {\n                                children: \"할인쿠폰 적용가\"\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        onClick: onCouponClick,\n                        className: (filteredHasCoupon === null || filteredHasCoupon === void 0 ? void 0 : filteredHasCoupon()) && !(filteredHasCoupon === null || filteredHasCoupon === void 0 ? void 0 : filteredHasCoupon().length) ? \"show-coupon\" : \"\",\n                        children: (filteredHasCoupon === null || filteredHasCoupon === void 0 ? void 0 : filteredHasCoupon()) && (filteredHasCoupon === null || filteredHasCoupon === void 0 ? void 0 : filteredHasCoupon().length) > 0 ? /*#__PURE__*/ _jsxs(\"div\", {\n                            children: [\n                                /*#__PURE__*/ _jsx(Icon, {\n                                    icon: CouponDownload,\n                                    size: Sizes.small,\n                                    color: \"#fff\"\n                                }),\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    children: \"쿠폰 받기\"\n                                })\n                            ]\n                        }) : /*#__PURE__*/ _jsx(\"span\", {\n                            children: \"쿠폰 보기\"\n                        })\n                    })\n                ]\n            })\n        ]\n    });\n};\nexport default HandoutPriceSection;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { AdditionalCouponDialog, AdditionalCouponDrawer } from \"@/components/Coupons/AdditionalCouponContents\";\nimport useLegacyCouponReceive from \"@/components/Package/PurchaseSection/legacy/useLegacyCouponReceive\";\nimport { usePurchaseStore } from \"@/components/Package/PurchaseSection/purchaseStore\";\nimport { HandoutAllowanceSection } from \"@/components/Product/Handout/HandoutAllowanceSection\";\nimport { ProductRating } from \"@/components/Reviews\";\nimport { OnlySolvookTag } from \"@/components/Tags\";\nimport Icon from \"@/components/icon/Icon\";\nimport { ArrowRight, Sizes } from \"@/components/icon/IconList\";\nimport CheckLoginDialog from \"@/components/modal/CheckLoginDialog\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport coreInfoList from \"@/modules/products/components/ProductDetail/coreInfoList\";\nimport { Stack, Typography } from \"@mui/material\";\nimport dayjs from \"dayjs\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useState } from \"react\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport { SourceTypeWithString } from \"src/api/product\";\nimport useHandoutProductStore from \"src/store/relatedProduct\";\nimport { useTheme } from \"styled-components\";\nimport HandoutPriceSection from \"./HandoutPriceSection\";\nimport { ContentInfo, CoreSection } from \"./HandoutProductDetail.style\";\nimport { StyledDivider } from \"./HandoutProductDetailContent.style\";\nconst DEFAULT_BADGE_TEXT = \"쏠북패스 Only\";\nexport const HandoutCoreSection = (param)=>{\n    let { product , productType , authorLabName , publisherName , isFreepass , badgeText  } = param;\n    var _product_source, _product_source1, _product_source_object;\n    const theme = useTheme();\n    const router = useRouter();\n    const isBooks = isBooksProduct(product);\n    const { isMobile  } = useWindowDimensions();\n    const { isLoggedIn  } = useAuthStore();\n    const [checkModal, setCheckModal] = useState(false);\n    const { showCouponModal , setFlags , selectedTab , hasSelectedPass  } = usePurchaseStore((state)=>({\n            showCouponModal: state.showCouponModal,\n            setFlags: state.setFlags,\n            selectedTab: state.selectedTab,\n            hasSelectedPass: state.selectedPass !== null && !state.selectedPass.isDisabled\n        }));\n    const { rating  } = useHandoutProductStore((state)=>({\n            rating: state.rating\n        }));\n    const { handoutCoupons , filteredHasCoupon  } = useLegacyCouponReceive({\n        id: product.id,\n        price: product.price\n    });\n    const checkLogin = useCallback(()=>{\n        if (!isLoggedIn) setFlags({\n            showSignInModal: true\n        });\n        else setFlags({\n            showCouponModal: !showCouponModal\n        });\n        if (filteredHasCoupon() && filteredHasCoupon().length > 0) {\n            //mx 여기서 필요한 쿠폰 아이디는 어떤 아이디 인가?\n            mixpanelEvent(\"Coupon Get Button Clicked\", {\n                \"Button Name\": \"쿠폰 받기\"\n            });\n        }\n    }, [\n        isLoggedIn\n    ]);\n    var _handoutCoupons_coupons, _handoutCoupons_coupons1;\n    return /*#__PURE__*/ _jsxs(CoreSection, {\n        className: \"new-col\",\n        children: [\n            /*#__PURE__*/ _jsxs(Stack, {\n                direction: \"row\",\n                spacing: 1.5,\n                alignItems: \"center\",\n                children: [\n                    isFreepass && /*#__PURE__*/ _jsx(OnlySolvookTag, {\n                        sx: {\n                            position: \"static\"\n                        },\n                        children: badgeText !== null && badgeText !== void 0 ? badgeText : DEFAULT_BADGE_TEXT\n                    }),\n                    /*#__PURE__*/ _jsxs(Typography, {\n                        variant: \"body2\",\n                        sx: {\n                            color: \"primary.main\",\n                            \"& span\": {\n                                color: \"grey.400\",\n                                ml: 1.5\n                            }\n                        },\n                        children: [\n                            SourceTypeWithString[productType],\n                            \" \",\n                            isBooks ? /*#__PURE__*/ _jsx(\"span\", {\n                                children: dayjs(product.publishedAt).format(\"YYYY년 개정판\")\n                            }) : (productType === \"textbook\" || productType === \"workbook\") && /*#__PURE__*/ _jsx(\"span\", {\n                                children: product.published_at && dayjs(product.published_at).format(\"YYYY년 출간\")\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"h1\", {\n                children: product.title\n            }),\n            rating ? /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"rating-box\",\n                children: [\n                    /*#__PURE__*/ _jsx(ProductRating, {\n                        precision: 0.1,\n                        value: rating,\n                        readOnly: true,\n                        size: Sizes.xmedium\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        children: Number.isInteger(rating) ? \"\".concat(rating, \".0\") : rating\n                    })\n                ]\n            }) : \"\",\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"authorContainer\",\n                children: [\n                    product.author,\n                    authorLabName && /*#__PURE__*/ _jsxs(Link, {\n                        onClick: ()=>mixpanelEvent(\"Product Detail Page Lab Button Clicked\", {\n                                \"Lab Button Proposition\": \"Top Section\"\n                            }),\n                        href: \"/@\".concat(authorLabName),\n                        className: \"author-nickname\",\n                        children: [\n                            \"브랜드\",\n                            /*#__PURE__*/ _jsx(Icon, {\n                                icon: ArrowRight,\n                                size: Sizes.xsmall,\n                                color: theme.new.colors.sol_gray_600\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(HandoutPriceSection, {\n                price: product.price,\n                hasSelectedPass: hasSelectedPass,\n                selectedTab: selectedTab,\n                handoutCoupons: handoutCoupons,\n                onCouponClick: checkLogin,\n                filteredHasCoupon: filteredHasCoupon,\n                isFreepass: isFreepass\n            }),\n            isMobile ? /*#__PURE__*/ _jsx(AdditionalCouponDrawer, {\n                anchor: \"bottom\",\n                open: showCouponModal,\n                handleClose: ()=>setFlags({\n                        showCouponModal: false\n                    }),\n                handoutCoupons: (_handoutCoupons_coupons = handoutCoupons === null || handoutCoupons === void 0 ? void 0 : handoutCoupons.coupons) !== null && _handoutCoupons_coupons !== void 0 ? _handoutCoupons_coupons : []\n            }) : /*#__PURE__*/ _jsx(AdditionalCouponDialog, {\n                open: showCouponModal,\n                handleClose: ()=>setFlags({\n                        showCouponModal: false\n                    }),\n                handoutCoupons: (_handoutCoupons_coupons1 = handoutCoupons === null || handoutCoupons === void 0 ? void 0 : handoutCoupons.coupons) !== null && _handoutCoupons_coupons1 !== void 0 ? _handoutCoupons_coupons1 : []\n            }),\n            /*#__PURE__*/ _jsx(StyledDivider, {}),\n            /*#__PURE__*/ _jsx(ContentInfo, {\n                children: coreInfoList(product, isBooks ? product.publisher : publisherName).map((item, idx)=>{\n                    if (item.value == 0 || !!!item.value) {\n                        return;\n                    }\n                    return /*#__PURE__*/ _jsxs(\"li\", {\n                        className: \"core-info-\" + productType,\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"type\",\n                                children: item.type\n                            }),\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                className: \"type-value \".concat(item.type),\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"span\", {\n                                        onClick: ()=>{\n                                            if (item.link) {\n                                                router.push(item.link);\n                                            }\n                                        },\n                                        children: item.value\n                                    }),\n                                    item.link && /*#__PURE__*/ _jsx(Icon, {\n                                        icon: ArrowRight,\n                                        size: Sizes.xsmall,\n                                        color: theme.new.colors.sol_gray_600\n                                    })\n                                ]\n                            })\n                        ]\n                    }, \"core-info\" + idx);\n                })\n            }),\n            !isBooks && /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    /*#__PURE__*/ _jsx(StyledDivider, {}),\n                    /*#__PURE__*/ _jsx(HandoutAllowanceSection, {\n                        productType: productType,\n                        isBooks: isBooks,\n                        studioVersion: (_product_source = product.source) === null || _product_source === void 0 ? void 0 : _product_source.studio_version,\n                        isParsedByMl: (_product_source1 = product.source) === null || _product_source1 === void 0 ? void 0 : (_product_source_object = _product_source1.object) === null || _product_source_object === void 0 ? void 0 : _product_source_object.isParsedByMl\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(CheckLoginDialog, {\n                open: checkModal,\n                onClose: ()=>setCheckModal(false)\n            })\n        ]\n    });\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  justify-content: space-between;\\n  align-items: center;\\n  padding-right: 16px;\\n  transition: all 0.3s;\\n  min-height: 62px;\\n  border-radius: 6px;\\n  cursor: pointer;\\n\\n  .related-product-price,\\n  .desc {\\n    color: \",\n        \";\\n    line-height: 1.5;\\n    letter-spacing: -0.16px;\\n  }\\n\\n  .related-product-price {\\n    font-size: 16px;\\n    margin-right: 20px;\\n    font-weight: normal;\\n  }\\n\\n  .title {\\n    overflow: hidden;\\n    text-overflow: ellipsis;\\n    font-size: 16px;\\n    line-height: 1.5;\\n    letter-spacing: -0.16px;\\n  }\\n\\n  &.selected {\\n    background-color: \",\n        \";\\n\\n    .mask {\\n      display: block;\\n    }\\n  }\\n\\n  :hover {\\n    background-color: \",\n        \";\\n\\n    .mask {\\n      display: block;\\n    }\\n  }\\n\\n  .checkbox {\\n    .ant-checkbox-checked .ant-checkbox-inner {\\n      z-index: 0;\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    min-height: unset;\\n    padding: 12px 16px;\\n    border-radius: 0;\\n    .related-product-price {\\n      font-size: 14px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  margin-right: 16px;\\n  cursor: pointer;\\n  position: relative;\\n  //box-shadow: 3px 3px 12px 0px rgba(28, 31, 46, 0.06);\\n  height: 62px;\\n  display: flex;\\n  align-items: center;\\n\\n  .mask {\\n    top: 0;\\n    display: none;\\n    position: absolute;\\n  }\\n\\n  img {\\n    box-shadow: 3px 3px 12px 0px rgba(28, 31, 46, 0.06);\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n  width: 100%;\\n  justify-content: space-between;\\n  @media (max-width: 768px) {\\n    flex-direction: column;\\n    align-items: flex-start;\\n    gap: 4px;\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  border-radius: 2px;\\n  max-width: unset;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Image from \"@/components/common/Image\";\nimport Icon from \"@/components/icon/Icon\";\nimport { ImageMask } from \"@/components/icon/IconList\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { numberFormatter } from \"@/lib/utils\";\nimport { Checkbox } from \"antd\";\nimport React, { useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport useHandoutProductStore from \"../../../../store/relatedProduct\";\nexport const thumbWidth = 44;\nexport const RelatedListItem = (param)=>{\n    let { product , isFreepass  } = param;\n    const { toggleSelected , selectedRelatedProducts , openRelatedProductPreviewModal  } = useHandoutProductStore((state)=>({\n            toggleSelected: state.toggleRelatedProductSelected,\n            selectedRelatedProducts: state.purchaseProductsInfo.selectedRelatedProducts,\n            relatedProducts: state.relatedProducts,\n            openRelatedProductPreviewModal: state.openRelatedProductPreviewModal\n        }));\n    const isChecked = useMemo(()=>!!selectedRelatedProducts.find((item)=>item.id === product.id), [\n        selectedRelatedProducts\n    ]);\n    const onChange = useCallback(()=>{\n        toggleSelected(product);\n    }, [\n        product\n    ]);\n    const onClickPreview = useCallback((event)=>{\n        event.preventDefault();\n        openRelatedProductPreviewModal(product);\n        mixpanelEvent(\"Preview Button Clicked\", {\n            Proposition: \"상품상세페이지\",\n            bookId: product.title,\n            bookTitle: product.title\n        });\n    }, [\n        product\n    ]);\n    return /*#__PURE__*/ _jsx(\"label\", {\n        htmlFor: \"related-\".concat(product.id),\n        children: /*#__PURE__*/ _jsxs(RelatedListItemWrapper, {\n            className: isChecked ? \"selected\" : \"\",\n            children: [\n                /*#__PURE__*/ _jsxs(ImageContainer, {\n                    className: \"image-container\",\n                    onClick: onClickPreview,\n                    children: [\n                        /*#__PURE__*/ _jsx(ThumbnailImage, {\n                            alt: \"book-img\",\n                            width: thumbWidth,\n                            height: 62,\n                            src: product.thumbImg\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"mask\",\n                            children: /*#__PURE__*/ _jsx(Icon, {\n                                icon: ImageMask\n                            })\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsxs(Stack, {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"p\", {\n                            className: \"title\",\n                            children: product.title\n                        }),\n                        (product === null || product === void 0 ? void 0 : product.hasAlreadyOwned) ? /*#__PURE__*/ _jsx(\"p\", {\n                            className: \"desc\",\n                            children: \"이미 구매한 자료\"\n                        }) : !isFreepass && /*#__PURE__*/ _jsxs(\"p\", {\n                            className: \"related-product-price\",\n                            children: [\n                                numberFormatter(product.price),\n                                \"원\"\n                            ]\n                        })\n                    ]\n                }),\n                !product.hasAlreadyOwned && /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"checkbox\",\n                    children: /*#__PURE__*/ _jsx(Checkbox, {\n                        id: \"related-\".concat(product.id),\n                        onChange: onChange,\n                        checked: isChecked\n                    })\n                })\n            ]\n        })\n    });\n};\nconst RelatedListItemWrapper = styled.div.withConfig({\n    componentId: \"sc-f19474af-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_0);\nconst ImageContainer = styled.div.withConfig({\n    componentId: \"sc-f19474af-1\"\n})(_templateObject1());\nconst Stack = styled.div.withConfig({\n    componentId: \"sc-f19474af-2\"\n})(_templateObject2());\nexport const ThumbnailImage = styled(Image).withConfig({\n    componentId: \"sc-f19474af-3\"\n})(_templateObject3());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: 72px 32px;\\n  overflow: hidden;\\n\\n  > div {\\n    //height: 100%;\\n    //margin: 72px 0;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  background-color: rgba(28, 31, 46, 0.5);\\n  \",\n        \"\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  height: 80vh;\\n  max-width: 788px;\\n  display: flex;\\n  flex-direction: column;\\n  @media (max-width: 768px) {\\n    height: 100%;\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  padding: 16px;\\n  display: flex;\\n  gap: 16px;\\n\\n  .ant-col {\\n    gap: 8px;\\n    display: flex;\\n    flex-direction: column;\\n\\n    p {\\n      text-overflow: ellipsis;\\n      font-size: 16px;\\n      font-weight: 400;\\n      line-height: 1.5;\\n      letter-spacing: -0.16px;\\n\\n      &.price {\\n        color: \",\n        \";\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  padding: 24px 16px;\\n  flex-direction: column;\\n  padding-bottom: 80px;\\n  flex-grow: 1;\\n  overflow-y: auto;\\n\\n  > p {\\n    margin-bottom: 8px;\\n    font-size: 16px;\\n    font-weight: 600;\\n    line-height: 1.5;\\n    letter-spacing: -0.16px;\\n  }\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  position: absolute;\\n  bottom: 0;\\n  left: 0;\\n  right: 0;\\n  background-color: rgba(255, 255, 255, 0.9);\\n  padding: 16px;\\n  display: flex;\\n  justify-content: flex-end;\\n  gap: 8px;\\n\\n  .ant-btn {\\n    padding: 12px 20px;\\n    font-size: 16px;\\n  }\\n\\n  @media (max-width: 1200px) {\\n    .ant-btn {\\n      width: 100%;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  &.ant-divider {\\n    border-block-start: 8px solid \",\n        \";\\n  }\\n\\n  &.ant-divider-horizontal {\\n    margin: 0;\\n  }\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport Sheet from \"react-modal-sheet\";\nimport { Col, Divider } from \"antd\";\nimport { ThumbnailImage } from \"./RelatedListItem\";\nimport FilledButton from \"@/components/common/Button/FilledButton\";\nimport { numberFormatter } from \"@/lib/utils\";\nimport { useRouter } from \"next/router\";\nimport Modal from \"@/components/modal/Modal\";\nimport { PRODUCTS_PAGE } from \"@/settings/constant\";\nimport useHandoutProductStore from \"src/store/relatedProduct\";\nimport Image from \"@/components/common/Image\";\nexport const RelatedProductPreviewModal = (param)=>{\n    let {} = param;\n    const { isMobile  } = useWindowDimensions();\n    const { isOpen , onClose , product  } = useHandoutProductStore((state)=>({\n            isOpen: state.isOpenRelatedProductPreviewModal,\n            onClose: state.closeRelatedProductPreviewModal,\n            product: state.selectedPreviewProduct\n        }));\n    if (!isMobile) return /*#__PURE__*/ _jsx(PassInfoModalWrapper, {\n        open: isOpen,\n        onClose: onClose,\n        depth: 1007,\n        children: /*#__PURE__*/ _jsx(PreviewRelatedItem, {\n            product: product,\n            onCancel: onClose\n        })\n    });\n    return /*#__PURE__*/ _jsx(PassInfoSheet, {\n        isOpen: isOpen,\n        onClose: onClose,\n        disableDrag: true,\n        children: /*#__PURE__*/ _jsx(Sheet.Container, {\n            children: /*#__PURE__*/ _jsx(Sheet.Content, {\n                children: /*#__PURE__*/ _jsx(PreviewRelatedItem, {\n                    product: product,\n                    onCancel: onClose\n                })\n            })\n        })\n    });\n};\nconst PassInfoModalWrapper = styled(Modal).withConfig({\n    componentId: \"sc-f1a9a530-0\"\n})(_templateObject());\nconst PassInfoSheet = styled(Sheet).withConfig({\n    componentId: \"sc-f1a9a530-1\"\n})(_templateObject1(), (props)=>!props.isOpen && \"background-color: transparent;\");\nexport const thumbWidth = 56;\nconst PreviewRelatedItem = (param)=>{\n    let { product , onCancel  } = param;\n    const router = useRouter();\n    if (!product) return null;\n    return /*#__PURE__*/ _jsxs(PreviewRelatedItemContainer, {\n        children: [\n            /*#__PURE__*/ _jsxs(ProductContainer, {\n                children: [\n                    /*#__PURE__*/ _jsx(Col, {\n                        children: /*#__PURE__*/ _jsx(ThumbnailImage, {\n                            alt: \"book-img\",\n                            width: thumbWidth,\n                            height: 62,\n                            src: product.thumbImg\n                        })\n                    }),\n                    /*#__PURE__*/ _jsxs(Col, {\n                        children: [\n                            /*#__PURE__*/ _jsx(\"p\", {\n                                className: \"title\",\n                                children: product.title\n                            }),\n                            /*#__PURE__*/ _jsxs(\"p\", {\n                                className: \"price\",\n                                children: [\n                                    numberFormatter(product.price),\n                                    \"원\"\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(StyledDivider, {}),\n            /*#__PURE__*/ _jsxs(ImageContainer, {\n                children: [\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        children: \"미리보기\"\n                    }),\n                    (product === null || product === void 0 ? void 0 : product.previewImgs) && product.previewImgs.length > 0 ? product.previewImgs.map((img, index)=>{\n                        return /*#__PURE__*/ _jsx(Image, {\n                            alt: \"book-img\",\n                            src: img.url,\n                            width: 788,\n                            height: 112\n                        }, index);\n                    }) : /*#__PURE__*/ _jsx(\"div\", {\n                        children: \"미리보기 이미지가 없습니다.\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(FixedButtonContainer, {\n                children: [\n                    /*#__PURE__*/ _jsx(FilledButton, {\n                        type: \"text\",\n                        variant: \"soft\",\n                        onClick: ()=>{\n                            onCancel();\n                            router.push(PRODUCTS_PAGE.concat(\"/\".concat(product.id)));\n                        },\n                        children: \"자세히 보기\"\n                    }),\n                    /*#__PURE__*/ _jsx(FilledButton, {\n                        type: \"text\",\n                        variant: \"solid\",\n                        onClick: onCancel,\n                        children: \"확인\"\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst PreviewRelatedItemContainer = styled.div.withConfig({\n    componentId: \"sc-f1a9a530-2\"\n})(_templateObject2());\nconst ProductContainer = styled.div.withConfig({\n    componentId: \"sc-f1a9a530-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_500);\nconst ImageContainer = styled.div.withConfig({\n    componentId: \"sc-f1a9a530-4\"\n})(_templateObject4());\nconst FixedButtonContainer = styled.div.withConfig({\n    componentId: \"sc-f1a9a530-5\"\n})(_templateObject5());\nconst StyledDivider = styled(Divider).withConfig({\n    componentId: \"sc-f1a9a530-6\"\n})(_templateObject6(), (props)=>props.theme.new.colors.sol_gray_50);\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  margin-bottom: \",\n        \"px;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 16px;\\n  align-items: flex-start;\\n  padding: 16px;\\n  transition: all 0.3s;\\n  min-height: 112px;\\n\\n  .title {\\n    overflow: hidden;\\n    text-overflow: ellipsis;\\n    font-size: 16px;\\n    line-height: 1.5;\\n    letter-spacing: -0.16px;\\n  }\\n\\n  .price,\\n  desc {\\n    font-size: 14px;\\n    line-height: 22px; /* 157.143% */\\n    letter-spacing: -0.14px;\\n  }\\n\\n  .price {\\n    color: \",\n        \";\\n    margin-right: 8px;\\n  }\\n\\n  .desc {\\n    color: \",\n        \";\\n    ::before {\\n      content: '|';\\n      margin-right: 8px;\\n      color: \",\n        \";\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  box-shadow: 3px 3px 12px 0px rgba(28, 31, 46, 0.06);\\n  height: 80px;\\n  display: flex;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  border-radius: 2px;\\n  max-width: unset;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: flex-start;\\n  width: 100%;\\n  flex-direction: column;\\n  gap: 8px;\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject6() {\n    const data = _tagged_template_literal([\n        \"\\n  &.ant-divider {\\n    border-block-start: 8px solid \",\n        \";\\n  }\\n\\n  &.ant-divider-horizontal {\\n    margin: 0;\\n  }\\n\"\n    ]);\n    _templateObject6 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject7() {\n    const data = _tagged_template_literal([\n        \"\\n  background-color: red;\\n\\n  &.ant-drawer {\\n    z-index: 1008 !important;\\n  }\\n\\n  .ant-drawer-mask {\\n    background: rgba(18, 20, 31, 0.2);\\n  }\\n\\n  .ant-drawer-header {\\n    padding: 0;\\n\\n    .close-btn {\\n      display: none;\\n    }\\n\\n    .ant-drawer-close {\\n      display: none;\\n    }\\n  }\\n\\n  .ant-drawer-body {\\n    padding: 0;\\n  }\\n\"\n    ]);\n    _templateObject7 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { SideSheetHeader } from \"@/components/SideSheets\";\nimport { numberFormatter } from \"@/lib/utils\";\nimport { Divider, Drawer } from \"antd\";\nimport Image from \"next/image\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { RelatedListItem } from \".\";\nimport useHandoutProductStore from \"../../../../store/relatedProduct\";\nimport { FixedPurchaseSection } from \"../FixedPurchaseSection\";\nexport const MobileDisplayAllRelatedProduct = (param)=>{\n    let { isOpenSideSheet , closeSideSheet , isFreepass  } = param;\n    const { relatedProducts , currentProduct  } = useHandoutProductStore((state)=>({\n            relatedProducts: state.relatedProducts,\n            currentProduct: state.currentProduct\n        }));\n    return /*#__PURE__*/ _jsxs(GNBSideSheetContainer, {\n        open: isOpenSideSheet,\n        onClose: closeSideSheet,\n        destroyOnClose: true,\n        width: \"100%\",\n        zIndex: 1006,\n        title: /*#__PURE__*/ _jsx(SideSheetHeader, {\n            title: \"연관 자료 함께 구매하기\",\n            onClose: closeSideSheet,\n            goToPrevStep: closeSideSheet\n        }),\n        placement: \"right\",\n        children: [\n            /*#__PURE__*/ _jsxs(MobileRelatedProductWrapper, {\n                children: [\n                    /*#__PURE__*/ _jsx(CurrentProduct, {\n                        product: currentProduct\n                    }),\n                    /*#__PURE__*/ _jsx(MobileDivider, {}),\n                    relatedProducts.map((product)=>{\n                        return /*#__PURE__*/ _jsx(RelatedListItem, {\n                            product: product,\n                            isFreepass: isFreepass\n                        }, product.id);\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(FixedPurchaseSection, {\n                isFreepass: isFreepass\n            })\n        ]\n    });\n};\nconst FOOTER_HEIGHT = 82;\nconst MobileRelatedProductWrapper = styled.div.withConfig({\n    componentId: \"sc-9b5b8977-0\"\n})(_templateObject(), FOOTER_HEIGHT);\nconst CurrentProduct = (param)=>{\n    let { product  } = param;\n    return /*#__PURE__*/ _jsxs(CurrentProductContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(ImageContainer, {\n                className: \"image-container\",\n                children: /*#__PURE__*/ _jsx(ThumbnailImage, {\n                    alt: \"book-img\",\n                    width: 56,\n                    height: 80,\n                    src: product.thumb_img\n                })\n            }),\n            /*#__PURE__*/ _jsxs(Stack, {\n                children: [\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"title\",\n                        children: product.title\n                    }),\n                    /*#__PURE__*/ _jsxs(SubStack, {\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"span\", {\n                                className: \"price\",\n                                children: [\n                                    numberFormatter(product.price),\n                                    \"원\"\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"desc\",\n                                children: \"이미 보고 있는 자료\"\n                            })\n                        ]\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst CurrentProductContainer = styled.div.withConfig({\n    componentId: \"sc-9b5b8977-1\"\n})(_templateObject1(), (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_indigo_500, (props)=>props.theme.new.colors.sol_gray_100);\nconst ImageContainer = styled.div.withConfig({\n    componentId: \"sc-9b5b8977-2\"\n})(_templateObject2());\nexport const ThumbnailImage = styled(Image).withConfig({\n    componentId: \"sc-9b5b8977-3\"\n})(_templateObject3());\nconst Stack = styled.div.withConfig({\n    componentId: \"sc-9b5b8977-4\"\n})(_templateObject4());\nconst SubStack = styled.div.withConfig({\n    componentId: \"sc-9b5b8977-5\"\n})(_templateObject5());\nconst MobileDivider = styled(Divider).withConfig({\n    componentId: \"sc-9b5b8977-6\"\n})(_templateObject6(), (props)=>props.theme.new.colors.sol_gray_50);\nconst GNBSideSheetContainer = styled(Drawer).withConfig({\n    componentId: \"sc-9b5b8977-7\"\n})(_templateObject7());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  h5 {\\n    font-weight: 600;\\n    line-height: 1.5;\\n    font-size: 16px;\\n    letter-spacing: -0.16px;\\n    margin-bottom: 12px;\\n    display: flex;\\n    align-items: center;\\n\\n    svg {\\n      margin-left: 4px;\\n    }\\n  }\\n\\n  .ant-divider-horizontal {\\n    margin: 40px 0;\\n  }\\n\\n  transition: all 0.5s ease-in-out;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  // @keyframes slideDown {\\n  // \tfrom {\\n  // \t\tmax-height: 260px;\\n  // \t}\\n  // \tto {\\n  // \t\tmax-height: \",\n        \"px; /* 최대 높이를 조절하셔야 합니다. */\\n  // \t}\\n  // }\\n  //\\n  // @keyframes slideUp {\\n  // \tfrom {\\n  // \t\tmax-height: \",\n        \"px; /* 최대 높이를 조절하셔야 합니다. */\\n  // \t}\\n  // \tto {\\n  // \t\tmax-height: 260px;\\n  // \t}\\n  // }\\n  display: flex;\\n  flex-direction: column;\\n  overflow: hidden;\\n  //height: \",\n        \"px; /* 최대 높이를 조절하셔야 합니다. */\\n  gap: 4px;\\n\\n  //&.expanded {\\n  //\tanimation: slideDown 0.5s forwards;\\n  //}\\n  //\\n  //&.collapsed {\\n  //\tanimation: slideUp 0.5s forwards;\\n  //}\\n  @media (max-width: 768px) {\\n    gap: 0;\\n    &.expanded,\\n    &.collapsed {\\n      animation: none;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  margin: 0 auto;\\n  margin-top: 12px;\\n  padding: 12px 20px;\\n  width: 340px;\\n  color: \",\n        \";\\n  text-align: center;\\n  font-size: 16px;\\n  font-weight: 600;\\n  line-height: 1.5;\\n  letter-spacing: -0.16px;\\n\\n  :hover {\\n    color: \",\n        \" !important;\\n    border: 1px solid \",\n        \" !important;\\n    background-color: rgba(169, 175, 199, 0.2);\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  align-items: center;\\n\\n  body:has(&) {\\n    .related-tooltip {\\n    }\\n\\n    .related-tooltip:not(.ant-tooltip-hidden) {\\n      display: flex;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport FilledButton from \"@/components/common/Button/FilledButton\";\nimport Icon from \"@/components/icon/Icon\";\nimport { InfoCircle, Sizes } from \"@/components/icon/IconList\";\nimport { Title } from \"@/components/Product/Handout\";\nimport { TooltipItem } from \"@/components/Product/Handout/HandoutAllowanceChip\";\nimport { RelatedProductPreviewModal } from \"@/components/Product/Handout/RelatedProducts/RelatedProductPreviewModal\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Tooltip } from \"antd\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport useHandoutProductStore from \"src/store/relatedProduct\";\nimport styled from \"styled-components\";\nimport { getRelatedProducts } from \"../../../../api/product\";\nimport { SectionWithDivider } from \"../SectionWithDivider\";\nimport { MobileDisplayAllRelatedProduct } from \"./MobileDisplayAllRelatedProduct\";\nimport { RelatedListItem } from \"./RelatedListItem\";\nexport const RelatedProduct = (param)=>{\n    let { product , isFreepass  } = param;\n    const { isMobile  } = useWindowDimensions();\n    const { data: relatedProductResponse  } = useQuery([\n        \"relatedProduct\",\n        product.id\n    ], ()=>getRelatedProducts(product.id.toString()));\n    const { relatedProducts , updateRelatedProducts , setHasAlreadyOwned  } = useHandoutProductStore((state)=>({\n            relatedProducts: state.relatedProducts,\n            updateRelatedProducts: state.updateRelatedProducts,\n            setHasAlreadyOwned: state.setHasAlreadyOwned\n        }));\n    const [displayAll, setDisplayAll] = useState(false);\n    const [isOpenSideSheet, setIsOpenSideSheet] = useState(false);\n    const DEFAULT_DISPLAY_COUNT = 4;\n    const toggleDisplayAllRelatedItems = useCallback(()=>{\n        if (!displayAll) {\n            mixpanelEvent(\"More Button Clicked\", {\n                \"Button Type\": \"연관자료\",\n                \"Button Name\": \"연관자료 전체보기\"\n            });\n        }\n        if (isMobile && !displayAll) {\n            setIsOpenSideSheet(true);\n            return;\n        }\n        setDisplayAll((prev)=>!prev);\n    }, [\n        isMobile\n    ]);\n    const displayList = useMemo(()=>{\n        if (!relatedProducts) return [];\n        return displayAll ? relatedProducts : relatedProducts.slice(0, DEFAULT_DISPLAY_COUNT);\n    }, [\n        displayAll,\n        relatedProducts\n    ]);\n    useEffect(()=>{\n        //지금 보고있는 자료 업데이트\n        if (!!relatedProductResponse) {\n            //이미 소유한 자료인지 업데이트\n            setHasAlreadyOwned(relatedProductResponse.hasAlreadyOwned || false);\n            //연관자료 리스트 업로드\n            updateRelatedProducts(relatedProductResponse.data);\n        }\n    }, [\n        relatedProductResponse\n    ]);\n    if (relatedProducts.length === 0) return null;\n    return /*#__PURE__*/ _jsxs(SectionWithDivider, {\n        children: [\n            /*#__PURE__*/ _jsxs(RelatedListLayout, {\n                children: [\n                    /*#__PURE__*/ _jsx(Title, {\n                        children: /*#__PURE__*/ _jsxs(CustomTooltip, {\n                            hasInfo: true,\n                            showArrow: true,\n                            placement: \"top\",\n                            color: \"white\",\n                            overlayStyle: {\n                                width: \"100%\"\n                            },\n                            overlayInnerStyle: {\n                                display: \"block\",\n                                backgroundColor: \"white\",\n                                boxShadow: \"6px 6px 20px 0px rgba(28, 31, 46, 0.12)\",\n                                maxWidth: \"410px\",\n                                width: \"100%\",\n                                flexGrow: 1,\n                                padding: \"20px\"\n                            },\n                            overlayClassName: \"related-tooltip\",\n                            title: /*#__PURE__*/ _jsx(TooltipItem, {\n                                title: \"연관 자료 함께 구매하기\",\n                                description: \"현재 보고 있는 수업자료와 동일한 저자, 출처 교재, 자료 유형의 수업자료들을 함께 구매할 수 있는 영역이에요. 필요한 자료를 선택 후 이용권을 사용하거나 장바구니에 담을 수 있어요.\",\n                                productType: \"handout\",\n                                linkTitle: null,\n                                link: null\n                            }),\n                            children: [\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    children: \"다른 단원도 구매하기\"\n                                }),\n                                /*#__PURE__*/ _jsx(Icon, {\n                                    icon: InfoCircle,\n                                    size: Sizes.small\n                                })\n                            ]\n                        })\n                    }),\n                    /*#__PURE__*/ _jsx(RelatedListContainer, {\n                        className: displayAll ? \"expanded\" : \"collapsed\",\n                        children: displayList.map((product)=>/*#__PURE__*/ _jsx(RelatedListItem, {\n                                product: product,\n                                isFreepass: isFreepass\n                            }, product.id))\n                    }),\n                    relatedProducts.length > DEFAULT_DISPLAY_COUNT && /*#__PURE__*/ _jsx(ShowMoreButton, {\n                        onClick: toggleDisplayAllRelatedItems,\n                        children: displayAll ? \"접기\" : \"전체보기\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(RelatedProductPreviewModal, {}),\n            /*#__PURE__*/ _jsx(MobileDisplayAllRelatedProduct, {\n                isOpenSideSheet: isOpenSideSheet,\n                closeSideSheet: ()=>setIsOpenSideSheet(false),\n                isFreepass: isFreepass\n            })\n        ]\n    });\n};\nconst RelatedListLayout = styled.div.withConfig({\n    componentId: \"sc-49ffed24-0\"\n})(_templateObject());\nconst RelatedListContainer = styled.div.withConfig({\n    componentId: \"sc-49ffed24-1\"\n})(_templateObject1(), (props)=>props.maxHeight, (props)=>props.maxHeight, (props)=>props.maxHeight);\nconst ShowMoreButton = styled(FilledButton).withConfig({\n    componentId: \"sc-49ffed24-2\"\n})(_templateObject2(), (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_100);\nexport const CustomTooltip = styled(Tooltip).withConfig({\n    componentId: \"sc-49ffed24-3\"\n})(_templateObject3());\n","import { RelatedListItem } from \"./RelatedListItem\";\nimport { RelatedProduct } from \"./RelatedProduct\";\nimport { RelatedProductPreviewModal } from \"./RelatedProductPreviewModal\";\nexport { RelatedListItem, RelatedProduct, RelatedProductPreviewModal };\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { Row } from \"antd\";\nimport { useModal } from \"src/utils/overlay\";\nimport { HandoutAdBanner } from \"@/components/Banner/AdBanner/HandoutAdBanner\";\nimport { HandoutImageSection } from \"@/components/Product/Handout/HandoutImageSection\";\nimport getPreviewImage from \"@/modules/products/utils/getPreviewImage\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport { HandoutCoreSection } from \"./HandoutCoreSection\";\nimport { Col, ProductDetailInfoWrapper } from \"./HandoutProductDetail.style\";\nimport { RelatedProduct } from \"./RelatedProducts\";\nconst HandoutProductDetailInfo = (param)=>{\n    let { product , isFreepass , badgeText  } = param;\n    const [_, { open: openPreviewModal  }] = useModal(\"preview-modal\");\n    const productType = isBooksProduct(product) ? product.productType : product.source_type;\n    const isBooks = isBooksProduct(product);\n    const thumbImg = isBooks ? product.thumbImg : product.thumb_img;\n    const hasPreviewImg = getPreviewImage(product).length > 0;\n    const { uciCode , publisherName , brandName  } = product;\n    return /*#__PURE__*/ _jsxs(ProductDetailInfoWrapper, {\n        children: [\n            /*#__PURE__*/ _jsxs(Row, {\n                children: [\n                    /*#__PURE__*/ _jsx(HandoutImageSection, {\n                        hasPreviewImg: hasPreviewImg,\n                        uciData: uciCode || \"\",\n                        isBooks: isBooks,\n                        openPreviewModal: openPreviewModal,\n                        thumbImg: thumbImg,\n                        title: product.title\n                    }),\n                    /*#__PURE__*/ _jsx(HandoutCoreSection, {\n                        product: product,\n                        productType: productType,\n                        authorLabName: brandName || \"\",\n                        publisherName: publisherName || \"\",\n                        isFreepass: isFreepass,\n                        badgeText: badgeText\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(Row, {\n                children: /*#__PURE__*/ _jsx(Col, {\n                    children: /*#__PURE__*/ _jsx(RelatedProduct, {\n                        product: product,\n                        isFreepass: isFreepass\n                    })\n                })\n            }),\n            /*#__PURE__*/ _jsx(Row, {\n                children: /*#__PURE__*/ _jsx(Col, {\n                    children: /*#__PURE__*/ _jsx(HandoutAdBanner, {\n                        position: \"productDetail\",\n                        subject: isBooks ? product.subject : product.source.subject\n                    })\n                })\n            })\n        ]\n    });\n};\nexport default HandoutProductDetailInfo;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  max-width: 1232px;\\n  width: 100%;\\n  margin-left: auto;\\n  margin-right: auto;\\n  padding-left: 16px;\\n  padding-right: 16px;\\n  flex-flow: unset;\\n  gap: 72px;\\n  justify-content: space-between;\\n  @media (max-width: 1200px) {\\n    gap: 32px;\\n    padding: 0 32px;\\n  }\\n  @media (max-width: 768px) {\\n    padding: 0 16px;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 67%;\\n  @media (max-width: \",\n        \"px) {\\n    width: 100%;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 32%;\\n  max-width: 340px;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  position: sticky;\\n  top: 32px;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { AdBanner } from \"@/components/Banner/AdBanner/AdBanner\";\nimport { PassInfoModal } from \"@/components/Package/PassInfoModal\";\nimport PurchaseSection from \"@/components/Package/PurchaseSection\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport ProductPreviewModal from \"@/modules/products/components/ProductPreviewModal\";\nimport { Col, Row } from \"antd\";\nimport React, { useEffect } from \"react\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport styled from \"styled-components\";\nimport { HANDOUT_BREAK_POINT } from \".\";\nimport useHandoutProductStore from \"../../../store/relatedProduct\";\nimport { FixedPurchaseSection } from \"./FixedPurchaseSection\";\nimport { HandoutPassSectionModal } from \"./HandoutPassSectionModal\";\nimport { HandoutProductDetailContent } from \"./HandoutProductDetailContent\";\nimport HandoutProductDetailInfo from \"./HandoutProductDetailInfo\";\nexport const HandoutProductDetailView = (param)=>{\n    let { product , badgeText  } = param;\n    var _product_source, _product_source1;\n    const { isLoggedIn , user: { hasUsableFreepass  }  } = useAuthStore();\n    const { width , isMobile  } = useWindowDimensions();\n    const isTablet = width <= HANDOUT_BREAK_POINT.TABLET;\n    const { updateCurrentProduct  } = useHandoutProductStore((state)=>({\n            updateCurrentProduct: state.updateCurrentProduct\n        }));\n    const isFreepass = ((_product_source = product.source) === null || _product_source === void 0 ? void 0 : _product_source.type) === \"freepass\";\n    useEffect(()=>{\n        //지금 보고있는 자료 업데이트\n        updateCurrentProduct(product);\n    }, [\n        product\n    ]);\n    return /*#__PURE__*/ _jsxs(ProductDetailViewWrapper, {\n        children: [\n            /*#__PURE__*/ _jsxs(ProductSectionCol, {\n                children: [\n                    /*#__PURE__*/ _jsx(HandoutProductDetailInfo, {\n                        product: product,\n                        isFreepass: isFreepass,\n                        badgeText: badgeText\n                    }),\n                    /*#__PURE__*/ _jsx(HandoutProductDetailContent, {\n                        product: product\n                    })\n                ]\n            }),\n            isTablet ? /*#__PURE__*/ _jsx(FixedPurchaseSection, {\n                isFreepass: isFreepass\n            }) : /*#__PURE__*/ _jsx(SideSectionCol, {\n                children: /*#__PURE__*/ _jsxs(StickySection, {\n                    children: [\n                        /*#__PURE__*/ _jsx(PurchaseSection, {\n                            product: product,\n                            hasUsableFreepass: hasUsableFreepass,\n                            isLoggedIn: isLoggedIn\n                        }),\n                        /*#__PURE__*/ _jsx(AdBanner, {\n                            subject: (_product_source1 = product.source) === null || _product_source1 === void 0 ? void 0 : _product_source1.subject,\n                            position: \"solvookPlus\",\n                            mixpanelPosition: \"product detail page cta\"\n                        })\n                    ]\n                })\n            }),\n            /*#__PURE__*/ _jsx(HandoutPassSectionModal, {}),\n            /*#__PURE__*/ _jsx(PassInfoModal, {}),\n            !isBooksProduct(product) && !isMobile && /*#__PURE__*/ _jsx(ProductPreviewModal, {\n                product: product\n            })\n        ]\n    });\n};\nexport const ProductDetailViewWrapper = styled(Row).withConfig({\n    componentId: \"sc-4212aece-0\"\n})(_templateObject());\nexport const ProductSectionCol = styled(Col).withConfig({\n    componentId: \"sc-4212aece-1\"\n})(_templateObject1(), HANDOUT_BREAK_POINT.TABLET);\nexport const SideSectionCol = styled(Col).withConfig({\n    componentId: \"sc-4212aece-2\"\n})(_templateObject2());\nexport const StickySection = styled.div.withConfig({\n    componentId: \"sc-4212aece-3\"\n})(_templateObject3());\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { Box, ButtonBase, Typography } from \"@mui/material\";\nimport React from \"react\";\nimport { ArrowRight2px, Sizes } from \"../icon/IconList\";\nconst TextBanner = (param)=>{\n    let { textBanner , subject  } = param;\n    // mx-204\n    const handleClick = (e)=>{\n        e.preventDefault();\n        mixpanelEvent(\"Text Banner Clicked\", {\n            Subject: subject,\n            \"Banner Text\": textBanner.text,\n            \"Banner Url\": textBanner.link\n        }, {\n            send_immediately: true\n        }, ()=>{\n            window.location.href = textBanner.link;\n        });\n    };\n    return /*#__PURE__*/ _jsxs(ButtonBase, {\n        onClick: handleClick,\n        disableRipple: true,\n        sx: {\n            width: \"100%\",\n            backgroundColor: textBanner.bgColors,\n            px: {\n                xs: 2.5,\n                sm: 4\n            },\n            py: 1.5,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: {\n                xs: \"space-between\",\n                sm: \"center\"\n            },\n            gap: {\n                xs: 0,\n                sm: 0.5\n            },\n            \"&:hover\": {\n                \"& .banner-text\": {\n                    textDecoration: \"underline\"\n                }\n            }\n        },\n        children: [\n            /*#__PURE__*/ _jsx(Typography, {\n                variant: \"subtitle1\",\n                className: \"banner-text\",\n                sx: {\n                    color: \"common.white\",\n                    textAlign: {\n                        xs: \"left\",\n                        sm: \"center\"\n                    },\n                    flex: {\n                        xs: 1,\n                        sm: \"initial\"\n                    },\n                    wordBreak: \"keep-all\"\n                },\n                children: textBanner.text\n            }),\n            /*#__PURE__*/ _jsx(Box, {\n                sx: {\n                    flexShrink: 0,\n                    display: \"flex\",\n                    alignItems: \"center\"\n                },\n                children: /*#__PURE__*/ _jsx(ArrowRight2px, {\n                    size: Sizes.small,\n                    color: \"#fff\"\n                })\n            })\n        ]\n    });\n};\nexport default TextBanner;\n","import { gaEvent, gaViewItem } from \"@/lib/ga4\";\nimport { useRouter } from \"next/router\";\nimport { useEffect, useState } from \"react\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport { mixpanelEvent, productDetailPageScrolled, productDetailPageViewed, productDetailTimeSpent } from \"@/lib/mixpanels/mixpanel\";\nimport { throttle } from \"lodash\";\nconst useProductDetailEventTracking = (product)=>{\n    const router = useRouter();\n    const [scroll, setScroll] = useState(0);\n    const onScroll = throttle(()=>{\n        let { pageYOffset  } = window;\n        setTimeout(()=>{\n            let newScroll = pageYOffset;\n            if (newScroll > scroll) {\n                setScroll(newScroll);\n            }\n        }, 1000);\n    }, 1000);\n    useEffect(()=>{\n        if (!product) return;\n        gaEvent({\n            action: \"view_content\",\n            value: product.title,\n            label: router.query.id,\n            category: \"page_view\"\n        });\n        gaViewItem({\n            id: product.id.toString(),\n            name: product.title,\n            price: product.price\n        });\n        if (isBooksProduct(product)) {\n            productDetailPageViewed({\n                id: product.id,\n                category: product.category,\n                price: product.price,\n                source_id: null,\n                source_type: product.provider,\n                title: product.title\n            });\n        } else {\n            productDetailPageViewed(product);\n        }\n        productDetailTimeSpent();\n        window.addEventListener(\"scroll\", onScroll, {\n            passive: true\n        });\n        return ()=>{\n            window.removeEventListener(\"scroll\", onScroll);\n        };\n    }, [\n        product\n    ]);\n    useEffect(()=>{\n        const handleRouteChange = (url, param)=>{\n            let { shallow  } = param;\n            //mixpanel\n            mixpanelEvent(\"Product Detail Page time spent\");\n            productDetailPageScrolled({\n                \"Product ID\": product.id,\n                \"Product Name\": product.title,\n                \"Scroll Depth\": scroll\n            });\n            setScroll(0);\n        };\n        router.events.on(\"routeChangeStart\", handleRouteChange);\n        return ()=>{\n            router.events.off(\"routeChangeStart\", handleRouteChange);\n        };\n    }, [\n        router.events\n    ]);\n};\nexport default useProductDetailEventTracking;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  min-height: 80vh;\\n  padding-top: 48px;\\n  padding-bottom: 72px;\\n  background-color: white;\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 768px) {\\n    padding-bottom: 88px;\\n    padding-top: 0;\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { View } from \"@/components\";\nimport { HandoutProductDetailView } from \"@/components/Product/Handout/HandoutProductDetailView\";\nimport TextBanner from \"@/components/Product/TextBanner\";\nimport useProductDetailEventTracking from \"@/components/Product/useProductDetailEventTracking\";\nimport { ProductDetailView } from \"@/modules/products/views/ProductDetailView\";\nimport { NextSeo } from \"next-seo\";\nimport { useMemo } from \"react\";\nimport { isBooksProduct } from \"src/api/booksProducts\";\nimport styled from \"styled-components\";\nconst ProductDetailPageWrapper = styled(View).withConfig({\n    componentId: \"sc-830ab3e5-0\"\n})(_templateObject());\nconst ProductShowNextPage = (param)=>{\n    let { product , textBanner , badgeText  } = param;\n    const productType = useMemo(()=>isBooksProduct(product) ? product.productType : product.source_type, [\n        product\n    ]);\n    useProductDetailEventTracking(product);\n    const productDescription = product.tags ? product.tags.map((tag)=>tag).join(\", \") : \"\";\n    const metadata = {\n        title: \"\".concat(product === null || product === void 0 ? void 0 : product.title, \" - 쏠북\"),\n        description: productDescription,\n        openGraph: {\n            title: \"\".concat(product === null || product === void 0 ? void 0 : product.title, \" - 쏠북\"),\n            description: product === null || product === void 0 ? void 0 : product.description,\n            url: \"https://solvook.com/products/\".concat(product.id),\n            images: [\n                {\n                    url: product === null || product === void 0 ? void 0 : product.thumb_img,\n                    alt: product === null || product === void 0 ? void 0 : product.title\n                }\n            ]\n        }\n    };\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(NextSeo, {\n                ...metadata\n            }),\n            textBanner && /*#__PURE__*/ _jsx(TextBanner, {\n                textBanner: textBanner,\n                subject: product.source.subject\n            }),\n            /*#__PURE__*/ _jsx(ProductDetailPageWrapper, {\n                children: productType === \"handout\" ? /*#__PURE__*/ _jsx(HandoutProductDetailView, {\n                    product: product,\n                    badgeText: badgeText\n                }) : /*#__PURE__*/ _jsx(ProductDetailView, {\n                    product: product\n                })\n            })\n        ]\n    });\n};\nexport var __N_SSP = true;\nexport default ProductShowNextPage;\n"],"names":[],"sourceRoot":""}